Gostaria de permitir que os utilizadores personalizassem as suas submissões de formulários? O campo Rich Text proporciona uma forma flexível de os utilizadores formatarem texto e imagens antes de submeterem os seus formulários em linha.
Este tutorial irá mostrar-lhe tudo o que precisa de saber para começar a utilizar o campo Rich Text no WPForms.
Antes de começar, primeiro precisa de se certificar de que o WPForms está instalado e ativado no seu site WordPress e que verificou a sua licença. Depois, pode criar um novo formulário ou editar um já existente para aceder ao construtor de formulários.
Adicionando um campo de rich text ao seu formulário
Uma vez que o campo Rich Text é uma funcionalidade avançada, encontra-o em Fancy Fields no construtor de formulários.
Para adicionar o campo Rich Text ao seu formulário, clique nele ou arraste-o e largue-o na área de pré-visualização.
Em seguida, pode alterar a etiqueta do campo, introduzindo o texto que desejar no campo Etiqueta.
Ativar as opções avançadas
Para aceder às opções avançadas do campo Rich Text, navegue até ao separador Avançadas no painel Opções de campo.
De seguida, vamos analisar duas das opções avançadas mais notáveis: Estilo do campo e Tamanho do campo.
Estilo de campo
O campo Rich Text inclui duas opções de estilo que pode escolher: Básico e Completo.
Estilo de campo básico
O estilo de campo Básico é bastante simples, pois inclui uma barra de ferramentas simples com caraterísticas mínimas.
Segue-se uma lista das opções da barra de ferramentas para o estilo Básico:
- Negrito
- Itálico
- Sublinhar
- Riscado
- Lista com marcadores
- Lista numerada
- Citação de bloco
- Alinhar à esquerda
- Alinhar ao centro
- Alinhar à direita
- Anular
- Refazer
- Inserir/editar ligação
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 visualizar as opções adicionais, clique no ícone de alternância da barra de ferramentas.
Segue-se uma lista de opções adicionais que ficam disponíveis quando se seleciona o estilo de campo Completo:
- Inserir a etiqueta Ler mais
- Linha horizontal
- Cor do texto
- Colar como texto
- Formatação clara
- Carácter especial
- Diminuir o travessão
- Aumentar o travessão
- Atalhos de teclado
Além disso, os utilizadores poderão selecionar uma gama de formatos de texto a partir do menu pendente localizado no canto superior esquerdo.
Nota: Para gerir a extensão do conteúdo que os utilizadores podem submeter, pode definir um limite de caracteres para o campo Rich Text. Consulte a nossa documentação para programadores para obter um guia sobre como implementar esta restrição.
Tamanho do campo
Existem três tamanhos de campo que 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 o seu campo Rich Text, clique no menu pendente denominado Tamanho do campo.
Nota: O WordPress está a abandonar o suporte para o Internet Explorer 11. Para os utilizadores com o Internet Explorer 11, a funcionalidade de adicionar multimédia no campo Rich Text pode não funcionar como esperado no frontend.
Permitir carregamentos de multimédia
O campo Rich Text oferece aos utilizadores a opção de carregar ficheiros de imagem. Segue-se uma lista de todos os tipos de imagens que podem ser carregadas através do campo Rich Text:
- .jpg, .jpeg, .jpe
- .gif
- .png
- .bmp
- .tiff, .tif
- .webp
- .ico
- .heic
Para ativar esta opção, navegue até ao separador Geral no painel Opções de Campo. Em seguida, selecione Permitir carregamentos de multimédia.
Uma vez ativado, verá agora um ícone multimédia na barra de ferramentas do campo Rich Text. Ao clicar neste ícone, os utilizadores podem carregar os seus ficheiros de imagem.
Eis o aspeto do nosso campo Rich Text com uma imagem carregada:
Por defeito, os ficheiros carregados pelo utilizador são armazenados no diretório Uploads do seu site, dentro da pasta WPForms.
No entanto, se preferir armazenar automaticamente os ficheiros carregados na biblioteca multimédia do WordPress, selecione Armazenar ficheiros na biblioteca multimédia do WordPress.
Utilizar o campo de texto detalhado
Ao interagir com o campo Rich Text no frontend do seu site, os utilizadores poderão alternar entre dois modos diferentes:
- Visual: As imagens e o texto serão apresentados diretamente no editor de texto.
- Texto: As imagens e o texto serão apresentados em HTML.
Por predefinição, o campo Rich Text inicia-se no modo Visual. No entanto, pode alternar entre os diferentes modos selecionando o separador Visual ou Texto no canto superior direito.
Agora, vamos adicionar algum texto ao campo Rich Text para podermos ver a diferença entre os dois modos.
Primeiro, vamos adicionar um título clicando no menu pendente no canto superior esquerdo e selecionando Título 3.
Depois, vamos escrever algum texto por cima da nossa imagem.
Agora, para ver o aspeto do nosso conteúdo no modo Texto, clique no separador Texto. Aqui, verá o conteúdo apresentado em HTML.
Incorporação de ficheiros externos
Se estiver a utilizar a nossa extensão Envio de publicações, poderá querer permitir que os utilizadores incorporem ficheiros externos, como vídeos do YouTube, podcasts do Spotify, etc., ao enviarem as suas publicações.
Por exemplo, um utilizador pode utilizar o código de incorporação de iframe do YouTube para incorporar um vídeo no campo Rich Text. Tecnicamente, isto mostraria o vídeo incorporado no campo Rich Text.
No entanto, o WPForms irá higienizar e limpar o código incorporado após o utilizador submeter o formulário. Nós implementamos esta medida de segurança para proteger os nossos utilizadores de atacantes que usam o código para explorar as fraquezas do site.
Se pretender incorporar vídeos em publicações submetidas através do addon Submissão de publicações, basta colar o link do vídeo diretamente no campo Rich Text. O WordPress encarrega-se de adicionar o código de incorporação e de apresentar o ficheiro incorporado no seu frontend utilizando oEmbeds.
Nota: Consulte a documentação oficial do WordPress para obter uma lista de sites que suportam o oEmbed.
É isso aí! Agora você tem algumas ideias de como usar o campo Rich Text no WPForms.
Em seguida, gostaria que os seus visitantes pudessem publicar conteúdo no seu site sem aceder ao seu painel de controlo do WordPress? Não deixe de consultar o nosso guia sobre como instalar e utilizar o addon Post Submissions.