Usando o Campo de Texto Rico

Gostaria de permitir que os usuários personalizem o envio de seus formulários? O campo de Texto Rico oferece uma maneira flexível para os usuários formatarem texto e imagens antes de enviar seus formulários online.

Este tutorial mostrará tudo o que você precisa saber para começar a usar o campo de Texto Rico no WPForms.

---

Antes de começar, você precisará garantir que o WPForms esteja instalado e ativado em seu site WordPress e que você tenha verificado sua licença. Em seguida, você pode criar um novo formulário ou editar um existente para acessar o construtor de formulários.

Adicionando um Campo de Texto Rico ao Seu Formulário

Como o campo de Texto Rico é um recurso avançado, você o encontrará em Campos Elaborados no construtor de formulários.

Para adicionar o campo de Texto Rico ao seu formulário, clique nele ou arraste e solte-o na área de visualização.

Em seguida, sinta-se à vontade para alterar o rótulo do campo inserindo o texto que desejar no campo Rótulo.

Habilitando Opções Avançadas

Para acessar as opções avançadas do campo de Texto Rico, navegue até a aba Avançado no painel Opções de Campo.

Em seguida, abordaremos duas das opções avançadas mais notáveis: Estilo do Campo e Tamanho do Campo.

Estilo do Campo

O campo de Texto Rico inclui duas opções de estilo entre as quais você pode escolher: Básico e Completo.

Estilo de Campo Básico

O estilo de campo Básico é bem simples, pois inclui uma barra de ferramentas simples com recursos mínimos.

Aqui está uma lista das opções da barra de ferramentas para o estilo Básico:

• Negrito
• Itálico
• Sublinhado
• Tachado
• Lista com marcadores
• Lista numerada
• Citação em bloco
• Alinhar à esquerda
• Centralizar
• Alinhar à direita
• Desfazer
• Refazer
• Inserir/editar link

Estilo de Campo Completo

O estilo de campo Completo inclui tudo o que está disponível com o estilo de campo Básico, e muito mais. Para exibir as opções adicionais, clique no ícone Alternar Barra de Ferramentas.

Aqui está uma lista de opções adicionais que ficam disponíveis quando você seleciona o estilo de campo Completo:

• Inserir tag Leia mais
• Linha horizontal
• Cor do texto
• Colar como texto
• Limpar formatação
• Caractere especial
• Diminuir recuo
• Aumentar recuo
• Atalhos de Teclado

Adicionalmente, os usuários poderão selecionar uma variedade de formatos de texto no menu suspenso localizado no canto superior esquerdo.

Tamanho do Campo

Existem três tamanhos de campo entre os quais você pode escolher: Pequeno, Médio ou Grande. Cada tamanho de campo diferente determinará a altura do campo de Rich Text.

Para escolher o tamanho do campo para o seu campo de Rich Text, clique no menu suspenso rotulado Tamanho do Campo.

Permitindo Upload de Mídia

O campo de Rich Text oferece a opção para os usuários fazerem upload de arquivos de imagem. Aqui está uma lista de todos os tipos de imagem que podem ser enviados através do campo de Rich Text:

• .jpg, .jpeg, .jpe
• .gif
• .png
• .bmp
• .tiff, .tif
• .webp
• .ico
• .heic

Para habilitar esta opção, navegue até a aba Geral no painel Opções de Campo. Em seguida, selecione Permitir Upload de Mídia.

Uma vez habilitado, você verá um ícone de mídia aparecer na barra de ferramentas do campo de Rich Text. Ao clicar neste ícone, os usuários podem fazer upload de seus arquivos de imagem.

Veja como nosso campo de Rich Text pode parecer com uma imagem enviada:

Por padrão, os arquivos enviados pelo usuário são armazenados no diretório Uploads do seu site, dentro da pasta WPForms.

No entanto, se preferir armazenar automaticamente os arquivos enviados na Biblioteca de Mídia do WordPress, selecione Armazenar arquivos na Biblioteca de Mídia do WordPress.

Usando o Campo de Texto Rico

Ao interagir com o campo Rich Text no frontend do seu site, os usuários poderão alternar entre dois modos diferentes:

• Visual: Imagens e texto serão exibidos diretamente no editor de texto.
• Texto: Imagens e texto serão exibidos em HTML.

Por padrão, o campo Rich Text iniciará no modo Visual. No entanto, você pode alternar entre os diferentes modos selecionando a aba Visual ou Texto no canto superior direito.

Agora, vamos adicionar algum texto ao campo Rich Text para que possamos ver a diferença entre os dois modos.

Primeiro, adicionaremos um título clicando no menu suspenso no canto superior esquerdo e selecionando Título 3.

Em seguida, digitaremos algum texto acima da nossa imagem.

Agora, para ver como nosso conteúdo fica no modo Texto, clique na aba Texto. Aqui você verá o conteúdo exibido em HTML.

Incorporando Arquivos Externos

Se você estiver usando nosso addon de Envio de Posts, pode querer permitir que os usuários incorporem arquivos externos, como vídeos do YouTube, podcasts do Spotify, etc., ao enviar seus posts.

Por exemplo, um usuário pode usar o código de incorporação iframe do YouTube para incorporar um vídeo no campo Rich Text. Tecnicamente, isso mostraria o vídeo incorporado no campo Rich Text.

No entanto, o WPForms sanitizará e limpará o código de incorporação após o usuário enviar o formulário. Implementamos essa medida de segurança para proteger nossos usuários contra atacantes que usam código para explorar vulnerabilidades do site.

Se você quiser incorporar vídeos a posts enviados através do addon de Envio de Posts, basta colar o link do vídeo diretamente no campo Rich Text. O WordPress cuida de adicionar o código de incorporação e exibir o arquivo incorporado no seu frontend usando oEmbeds.

É isso! Agora você tem algumas ideias de como usar o campo Rich Text no WPForms.

Em seguida, você gostaria que seus visitantes pudessem postar conteúdo no seu site sem acessar seu painel do WordPress? Certifique-se de conferir nosso guia sobre como instalar e usar o addon de Envio de Posts.