Utilizar o Campo HTML

Gostaria de incorporar algum HTML personalizado nos seus formulários? O campo HTML no WPForms permite que o faça. Isto pode ser útil para adicionar texto, links e outros elementos aos seus formulários.

Este tutorial irá mostrar-lhe todas as opções disponíveis para o campo HTML no WPForms, bem como alguns casos de uso para o mesmo.

---

Antes de prosseguir, certifique-se de que o WPForms está instalado e ativado no seu site WordPress e que verificou a sua licença. Em seguida, pode criar um novo formulário ou editar um existente para aceder ao construtor de formulários.

Adicionar um Campo HTML ao Seu Formulário

Como o campo HTML é uma funcionalidade avançada, irá encontrá-lo em Campos Elaborados no construtor de formulários.

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

Para além de adicionar o seu HTML, a única opção de campo que precisa de configurar é o rótulo. Pode introduzir qualquer texto que desejar no campo fornecido.

Ao contrário de outros campos, o rótulo do campo HTML só é visível no construtor de formulários para o ajudar a identificá-lo na área de pré-visualização. Os utilizadores não o verão no frontend, e o campo não será incluído nas submissões do seu formulário.

Utilizar o Campo HTML

As bases da utilização do campo HTML são bastante diretas. Basta introduzir o seu texto ou HTML no campo fornecido no painel Opções de Campo.

No entanto, existem muitos casos de uso diferentes para este campo. É altamente flexível e pode adaptá-lo a muitas situações diferentes.

Abaixo, cobrimos alguns dos casos de uso mais populares em mais detalhe.

Adicionar Texto Estilizado a um Formulário

Os campos HTML são uma das muitas formas de adicionar texto extra aos seus formulários, como instruções para os preencher ou informações importantes que deseja que os utilizadores vejam antes de submeterem as suas submissões.

No entanto, o campo HTML é único porque permite incluir texto estilizado, como negrito ou itálico. Pode adicionar as tags HTML apropriadas diretamente no campo Código no painel Opções de Campo.

No frontend, o exemplo acima ficaria assim:

Adicionalmente, pode usar tags HTML para adicionar cabeçalhos, listas e mais ao texto extra nos seus formulários.

Adicionar Links a um Formulário

O campo HTML também lhe permite adicionar links ao seu formulário. Isto pode ser útil se quiser permitir que os utilizadores acedam rapidamente a outra página enquanto preenchem o seu formulário.

Para adicionar uma ligação ao seu campo HTML, precisa de usar a etiqueta <a>. Primeiro, adicione as etiquetas de abertura e fecho em torno do texto que pretende usar para ancorar a sua ligação.

Em seguida, na etiqueta de abertura, adicione o atributo href e defina-o para o URL para o qual pretende ligar.

No frontend, isto aparecerá como uma ligação clicável no seu formulário.

Incorporar uma Imagem num Formulário

Também pode usar elementos <img> para adicionar imagens ao seu formulário. Para o fazer, adicione <img> ao campo Código no painel Opções de Campo.

Depois terá de adicionar o src ou URL de origem da imagem. Se a imagem que está a adicionar ao seu formulário estiver na sua Biblioteca de Média WordPress, pode encontrar o seu URL olhando para os Detalhes do Anexo.

O URL do Ficheiro está na parte inferior da janela, e pode clicar no botão para o copiar para a sua área de transferência.

Em seguida, adicione-o ao elemento <img> no seu campo HTML.

Também pode usar atributos HTML para alterar o tamanho da sua imagem e adicionar texto alternativo. No frontend, pode parecer algo assim:

Incorporar um Vídeo num Formulário

O último caso de uso que cobriremos neste artigo é a incorporação de um vídeo num formulário. Para o conseguir, tem de usar um elemento HTML chamado <iframe>.

Primeiro, adicione o elemento <iframe></iframe> ao campo Código no painel Opções de Campo.

Depois precisa de adicionar o src do vídeo que pretende incorporar. Se carregou o vídeo que está a usar para a sua Biblioteca de Média WordPress, pode encontrar o URL do Ficheiro como descrevemos na secção anterior.

Para vídeos do YouTube, pode clicar em Partilhar » Incorporar para copiar todo o iframe e colá-lo no seu campo HTML.

Depois de ter adicionado o seu src ao seu campo HTML, pode usar atributos HTML para alterar o tamanho do iframe e mais. No frontend, pode parecer algo assim:

Perguntas Frequentes

Estas são algumas das perguntas mais comuns que recebemos sobre o campo HTML.

Posso usar Smart Tags nos campos HTML dos meus formulários?

Sim, embora as Smart Tags sejam uma forma dinâmica de extrair e exibir dados dentro do seu formulário, elas não são processadas por defeito em campos HTML. No entanto, com um pequeno trecho de PHP, pode ativar as Smart Tags dentro destes campos.

Para instruções detalhadas sobre como implementar esta funcionalidade, consulte a nossa documentação para programadores.

É tudo! Agora tem algumas ideias sobre como usar o campo HTML no WPForms.

Em seguida, gostaria de aprender a adicionar CSS personalizado aos seus formulários? O nosso tutorial para iniciantes tem tudo o que precisa para começar.