Resumo de IA
Gostaria de incorporar algum HTML personalizado em seus formulários? O campo HTML no WPForms permite que você faça isso. Isso pode ser útil para adicionar texto, links e outros elementos aos seus formulários.
Este tutorial mostrará todas as opções disponíveis para o campo HTML no WPForms, bem como alguns casos de uso para ele.
Neste Artigo
Antes de prosseguir, certifique-se de que o WPForms está instalado e ativado em seu site WordPress e que você verificou 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 HTML ao Seu Formulário
Como o campo HTML é um recurso avançado, você o encontrará em Campos Elaborados no construtor de formulários.
Para adicioná-lo ao seu formulário, clique nele ou arraste e solte-o na área de visualização.
Além de adicionar seu HTML, a única opção de campo que você precisa configurar é o rótulo. Você pode inserir qualquer texto que desejar no campo fornecido.
Ao contrário de outros campos, o rótulo do campo HTML é visível apenas no construtor de formulários para ajudá-lo a identificá-lo na área de visualização. Os usuários não o verão no frontend, e o campo não será incluído nas entradas do seu formulário.
Observação: Se você configurou e-mails de notificação em seu formulário, o conteúdo do campo HTML não será incluído nos e-mails de notificação.
Usando o Campo HTML
O básico do uso do campo HTML é bastante simples. Basta inserir seu texto ou HTML no campo fornecido no painel Opções de Campo.
No entanto, existem muitos casos de uso diferentes para este campo. Ele é altamente flexível e você pode adaptá-lo a muitas situações diferentes.
Abaixo, cobrimos alguns dos casos de uso mais populares em mais detalhes.
Observação: Deseja adicionar shortcodes aos campos HTML do seu formulário? Confira nossa documentação para desenvolvedores para um tutorial completo sobre como fazer isso.
Adicionando Texto Estilizado a um Formulário
Os campos HTML são uma das muitas maneiras de adicionar texto extra aos seus formulários, como instruções para preenchê-los ou informações importantes que você deseja que os usuários vejam antes de enviar suas entradas.
No entanto, o campo HTML é exclusivo porque permite incluir texto estilizado, como negrito ou itálico. Você pode adicionar as tags HTML apropriadas diretamente no campo Código no painel Opções de Campo.
Observação: Se você é novo em HTML, pode encontrar listas completas de elementos e atributos HTML na página de referências HTML do Mozilla Developer Network.
No frontend, o exemplo acima ficaria assim:
Além disso, você pode usar tags HTML para adicionar títulos, listas e mais ao texto extra em seus formulários.
Adicionando Links a um Formulário
O campo HTML também permite adicionar links ao seu formulário. Isso pode ser útil se você quiser permitir que os usuários acessem rapidamente outra página enquanto preenchem seu formulário.
Para adicionar um link ao seu campo HTML, você precisa usar a tag <a>. Primeiro, adicione as tags de abertura e fechamento ao redor do texto que você deseja usar para ancorar seu link.
Em seguida, na tag de abertura, adicione o atributo href e defina-o para a URL para a qual você deseja vincular.
No frontend, isso aparecerá como um link clicável em seu formulário.
Observação: Para obter mais orientações sobre como criar links com HTML, recomendamos o guia da Mozilla Developer Network sobre criação de hiperlinks.
Incorporando uma Imagem em um Formulário
Você também pode usar elementos <img> para adicionar imagens ao seu formulário. Para fazer isso, adicione <img> ao campo Código no painel Opções de Campo.
Em seguida, você precisará adicionar o src ou URL de origem da imagem. Se a imagem que você está adicionando ao seu formulário estiver em sua Biblioteca de Mídia do WordPress, você poderá encontrar o URL dela olhando os Detalhes do Anexo.
O URL do Arquivo está na parte inferior da janela, e você pode clicar no botão para copiá-lo para a área de transferência.
Em seguida, adicione-o ao elemento <img> em seu campo HTML.
Você também pode usar atributos HTML para alterar o tamanho da sua imagem e adicionar texto alternativo a ela. No frontend, pode parecer algo assim:
Observação: Se precisar de mais ajuda para adicionar uma imagem ao seu formulário com HTML, recomendamos o tutorial da Mozilla Developer Network sobre imagens em HTML.
Incorporando um Vídeo em um Formulário
O último caso de uso que abordaremos neste artigo é a incorporação de um vídeo em um formulário. Para conseguir isso, você tem que usar um elemento HTML chamado <iframe>.
Observação: Para mais informações sobre iframes e como eles funcionam, consulte a entrada do glossário da WPBeginner para este termo.
Primeiro, adicione o elemento <iframe></iframe> ao campo Código no painel Opções de Campo.
Em seguida, você precisa adicionar o src do vídeo que deseja incorporar. Se você fez o upload do vídeo que está usando para sua Biblioteca de Mídia do WordPress, pode encontrar o URL do Arquivo como descrevemos na seção anterior.
Para vídeos do YouTube, você pode clicar em Compartilhar » Incorporar para copiar todo o iframe e colá-lo em seu campo HTML.
Depois de adicionar seu src ao seu campo HTML, você pode usar atributos HTML para alterar o tamanho do iframe e mais. No frontend, pode parecer algo assim:
Observação: Para um tutorial completo sobre o uso de iframes, confira o artigo da Mozilla Developer Network sobre o elemento iframe.
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 maneira dinâmica de buscar e exibir dados em seu formulário, elas não são processadas por padrão em campos HTML. No entanto, com um pequeno trecho de PHP, você pode habilitar as Smart Tags nesses campos.
Para instruções detalhadas sobre como implementar essa funcionalidade, consulte nossa documentação do desenvolvedor.
Observação: Esteja ciente de que isso requer funcionalidades avançadas, como adicionar código ao seu site, e, portanto, é recomendado para desenvolvedores.
É isso! Agora você tem algumas ideias sobre como usar o campo HTML no WPForms.
Em seguida, você gostaria de aprender sobre como adicionar CSS personalizado aos seus formulários? Nosso tutorial para iniciantes tem tudo o que você precisa para começar.