Usando o Rich Text Field

Gostaria de permitir que os usuários personalizassem os envios de formulários? O campo Rich Text oferece uma maneira flexível para os usuários formatarem texto e imagens antes de enviar seus formulários on-line.

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

---

Antes de começar, primeiro você precisa ter certeza de que o WPForms está instalado e ativado no seu site WordPress e que você verificou sua licença. Em seguida, você pode criar um novo formulário ou editar um já existente para acessar o construtor de formulários.

Como adicionar um campo de rich text ao seu formulário

Como o campo Rich Text é um recurso avançado, você o encontrará em Fancy Fields no construtor de formulários.

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

Em seguida, fique à vontade para alterar o rótulo do campo inserindo o texto que desejar no campo Label (Rótulo ).

Ativação de opções avançadas

Para acessar as opções avançadas do campo Rich Text, navegue até a guia Advanced (Avançado ) no painel Field Options (Opções de campo).

A seguir, examinaremos duas das opções avançadas mais importantes: Estilo do campo e Tamanho do campo.

Estilo de campo

O campo Rich Text inclui duas opções de estilo que você pode escolher: Básico e Completo.

Estilo de campo básico

O estilo de campo Basic é bastante direto, 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
• Riscado
• Lista com marcadores
• Lista numerada
• Citação de bloco
• Alinhar à esquerda
• Alinhar o centro
• Alinhar à direita
• Desfazer
• Refazer
• Inserir/editar link

Estilo de campo completo

O estilo de campo Completo inclui tudo o que está disponível no estilo de campo Básico e muito mais. Para exibir as opções adicionais, clique no ícone de alternância da barra de ferramentas.

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

• Inserir a tag Leia Mais
• Linha horizontal
• Cor do texto
• Colar como texto
• Formatação clara
• Caractere especial
• Diminuir o recuo
• Aumentar o recuo
• Atalhos de teclado

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

Tamanho do campo

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

Para escolher o tamanho do campo para seu campo Rich Text, clique no menu suspenso denominado Field Size (Tamanho do campo).

Permitir carregamentos de mídia

O campo Rich Text oferece aos usuários a opção de carregar arquivos de imagem. Aqui está uma lista de todos os tipos de imagem que podem ser carregados por meio do campo Rich Text:

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

Para ativar essa opção, navegue até a guia General (Geral ) no painel Field Options (Opções de campo). Em seguida, selecione Allow Media Uploads (Permitir uploads de mídia).

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

Veja como nosso campo Rich Text pode ficar com uma imagem carregada:

Por padrão, os arquivos carregados 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 carregados na Biblioteca de mídia do WordPress, selecione Armazenar arquivos na Biblioteca de mídia do WordPress.

Usando o Rich Text Field

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

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

Por padrão, o campo Rich Text será iniciado no modo Visual. No entanto, você pode alternar entre os diferentes modos selecionando a guia Visual ou Text 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 de nossa imagem.

Agora, para ver a aparência do nosso conteúdo no modo Texto, clique na guia Texto. Aqui você verá o conteúdo exibido em HTML.

Incorporação de arquivos externos

Se você estiver usando nosso complemento Post Submission, talvez queira permitir que os usuários incorporem arquivos externos, como vídeos do YouTube, podcasts do Spotify etc., ao enviar suas postagens.

Por exemplo, um usuário pode usar o código de incorporação de 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 higienizará e limpará o código incorporado depois que o usuário enviar o formulário. Implementamos essa medida de segurança para proteger nossos usuários contra invasores que usam o código para explorar os pontos fracos do site.

Se você quiser incorporar vídeos a publicações enviadas por meio do complemento Post Submission, basta colar o link do vídeo diretamente no campo Rich Text. O WordPress se encarrega de adicionar o código de incorporação e exibir o arquivo incorporado em seu frontend usando o oEmbeds.

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

Em seguida, você gostaria que seus visitantes pudessem publicar conteúdo em seu site sem acessar o painel do WordPress? Não deixe de conferir nosso guia sobre como instalar e usar o complemento Post Submissions.