Como Adicionar Formulários HTML no WordPress (2 Métodos)

Quer escrever sua própria marcação de formulário em vez de arrastar campos em um construtor visual?

Boas notícias: você não precisa escrever nenhum PHP para fazer esse formulário funcionar. Você pode deixar um plugin leve cuidar do processamento enquanto você escreve todas as tags. Alternativamente, você pode construir o formulário visualmente e inserir HTML personalizado exatamente onde você precisa.

Neste guia, mostraremos como criar um formulário HTML personalizado que funciona no WordPress.

O que são formulários HTML e por que criar um?

Um formulário HTML coleta informações do visitante, como nomes, e-mails e feedback, assim como qualquer outro formulário na web. O que o diferencia é como ele é construído. Em vez de depender de um editor visual pesado de arrastar e soltar, você constrói um formulário HTML com código puro. Isso significa que você digita os campos (como caixas de texto, caixas de seleção e menus suspensos) você mesmo.

Pessoas que usam formulários HTML em vez de um construtor de formulários de arrastar e soltar geralmente o fazem para maximizar o desempenho do site. Formulários HTML simples mantêm suas páginas da web carregando um pouco mais rápido. Além da velocidade, escrever o código você mesmo lhe dá controle total do design. Em vez de ficar limitado pelas configurações rígidas de um construtor, você pode personalizar o layout exatamente às suas necessidades.

A maioria dos usuários do WordPress descobre que os plugins de construtor de formulários de arrastar e soltar oferecem a melhor experiência de usuário. Você obtém personalização completa de HTML sem o incômodo da configuração manual do servidor.

Aqui está tudo o que abordaremos neste guia:

Método 1: Adicionando Formulários HTML no WordPress com um Plugin

🎖️ Ideal para: Desenvolvedores e gerentes de site que desejam controle total de HTML com uma solução leve e focada em desempenho. O plugin enfatiza a simplicidade e a velocidade em detrimento de construtores visuais de formulários.

Você pode adicionar um formulário HTML ao WordPress usando um plugin de formulário gratuito como o HTML Forms. Este plugin gerencia o PHP e um pouco de JavaScript necessário para executar um formulário HTML no WordPress, ao mesmo tempo que lhe dá total liberdade para escrever o HTML você mesmo.

A versão gratuita cobre tudo neste tutorial, incluindo o envio de notificações por e-mail e o armazenamento de suas submissões. A proteção contra spam também é gratuita.

Para começar, instale o plugin em seu site WordPress. Se precisar de ajuda, siga nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, vá para HTML Forms » Adicionar Novo para começar a criar seu formulário.

Digite um nome para o seu formulário no campo 'Título do Formulário'. Neste guia, estamos criando um formulário de contato simples, então nomeamos o nosso como 'Formulário de Contato'.

Em seguida, clique no botão Criar Formulário.

Depois de fazer isso, a página 'Editar Formulário' aparecerá e você poderá começar a personalizar seu formulário HTML.

Na parte superior da página, você verá os detalhes do seu formulário, incluindo o título do formulário, slug e shortcode. Abaixo desses detalhes, você encontrará cinco abas: 'Campos', 'Mensagens', 'Configurações', 'Ações' e 'Submissões'.

A aba 'Campos' contém dez botões que geram o código do seu campo.

Na parte inferior desta aba, você encontrará um formulário HTML pré-construído junto com uma pré-visualização.

O formulário padrão é bem simples. Ele tem 4 campos para os usuários digitarem seus nomes, endereços de e-mail, um assunto breve e uma mensagem.

Para adicionar um novo campo, clique no botão correspondente logo acima da caixa 'Código do Formulário'.

Vamos substituir o campo Assunto por um campo de lista suspensa neste tutorial.

Vá em frente e clique em 'Dropdown' para abrir suas configurações. Em seguida, digite sua pergunta na caixa 'Rótulo do Campo' e adicione uma opção por tipo de consulta, como 'Pergunta geral', 'Vendas' e 'Suporte'.

Após inserir essas informações, clique em 'Adicionar Campo ao Formulário'.

Você verá então a nova tag de lista suspensa aparecer na caixa 'Código do Formulário'. Basta rolar para baixo para conferir sua marcação atualizada.

Para tornar o formulário amigável, vamos colocar o campo de seleção diretamente abaixo do campo ‘Seu e-mail’. Como este plugin não possui um construtor de arrastar e soltar, você precisará cortar o código do construtor de código e colá-lo onde deseja colocá-lo.

Para remover o campo Assunto, exclua todo o bloco de parágrafo que contém o campo Assunto.

Quando terminar, você vai querer verificar o painel ‘Pré-visualização do Formulário’.

Se você não conseguir vê-lo, clique no link ‘Mostrar Pré-visualização do Formulário’.

Esta pré-visualização ao vivo permite confirmar que suas alterações funcionaram sem quebrar o layout.

Você pode verificar rapidamente se o campo Assunto desapareceu e testar se sua nova seleção funciona corretamente.

Em seguida, clique no botão azul ‘Salvar Alterações’.

Agora, você pode querer verificar a configuração do formulário. Clique na aba ‘Mensagens’ para ver como o HTML Forms configura as mensagens de confirmação de envio do formulário.

Esta aba permite personalizar as mensagens de confirmação que os usuários verão.

Se você estiver satisfeito com o texto padrão, pode deixá-lo. Caso contrário, faça suas edições e clique em Salvar Alterações.

Por padrão, um novo formulário salva suas entradas no banco de dados, mas não enviará um e-mail quando alguém o enviar.

Para corrigir isso, clique na aba Ações. Você verá um aviso dizendo ‘Nenhuma ação de formulário configurada para este formulário.’

Clique em ‘Enviar E-mail’.

Os campos ‘De’, ‘Para’ e ‘Mensagem’ são todos obrigatórios. Você pode usar os campos de variável listados diretamente abaixo da caixa de Mensagem para inserir automaticamente informações que o visitante digitou em seu formulário.

Após preenchê-los, clique em ‘Salvar Alterações’. Você agora receberá um e-mail toda vez que alguém enviar seu formulário.

Uma vez que tudo esteja configurado, tudo o que você precisa fazer é publicar seu formulário HTML. Vá para a página ou post onde você deseja incorporar o formulário. Em seguida, passe o mouse sobre a área onde deseja inserir o formulário e clique no botão ‘+’.

A partir daqui, comece a digitar ‘HTML Forms’ na barra de pesquisa. Quando o bloco correto aparecer, clique para adicioná-lo à sua página ou post.

Dentro do bloco HTML Forms, clique no menu suspenso e escolha o formulário que deseja exibir.

Depois de selecionar o formulário no menu suspenso, clique no botão ‘Atualizar’.

Seu formulário de contato agora está no ar. Veja como ele ficará para seus visitantes:

Antes de promover o formulário em qualquer lugar, recomendamos testá-lo você mesmo enviando uma entrada de exemplo. É assim que você confirma que o formulário não está apenas sendo exibido, mas realmente entregando.

Após enviar uma entrada de teste, vá para HTML Forms » Todos os Formulários. Aqui, clique no link ‘Submissões’ do seu formulário.

Isso mostra todas as suas submissões de formulário. Sua entrada de teste aparecerá na tabela, e você também deverá receber uma notificação em sua caixa de entrada.

A tabela ‘Submissões’ abre com uma coluna ‘Timestamp’ informando quando o formulário foi enviado, seguida por uma coluna para cada campo.

Método 2: Adicionando HTML Personalizado a Formulários Com Arrastar e Soltar

🎖️ Ideal para: Qualquer pessoa que queira criar um formulário visualmente, mas ainda precise inserir HTML específico nele, como uma dica de ferramenta, um link ou uma nota formatada.

Quando se trata de criar formulários, recomendamos o WPForms. Ele oferece um construtor de arrastar e soltar, permitindo que você insira sua própria marcação, para que um link, uma nota formatada ou uma dica de ferramenta apareçam exatamente onde você deseja.

Usamos o WPForms em nossos próprios sites para formulários de contato, geração de leads, pesquisas anuais e muito mais.

WPForms Lite é totalmente gratuito, mas o campo HTML usado neste método é um recurso pago. Ele está disponível no plano Basic (R$ 199,90/ano) e superiores.

Neste método, mostraremos como adicionar trechos de código HTML para personalizar seus formulários do WordPress usando o WPForms.

Para começar, instale e ative o WPForms.

Após concluir, você pode começar a criar formulários e adicionar HTML personalizado. Para este guia, mostraremos como adicionar uma dica de ferramenta simples ao seu formulário de contato.

Para começar, vamos criar o formulário de contato indo para WPForms » Adicionar Novo.

No painel Configuração, comece dando um nome ao seu formulário.

Este nome é apenas para referência interna, então você pode usar o que quiser.

O próximo passo é decidir como você deseja construir seu formulário. Com o WPForms, você pode começar com um modelo pré-fabricado, construir do zero ou descrever o que precisa e deixar o construtor de formulários com IA montá-lo para você.

Se você quiser usar o construtor com inteligência artificial, basta inserir um prompt simples. A IA criará o formulário para você em alguns segundos.

Para este tutorial, usaremos um modelo pré-construído.

Como existem mais de 2.100 modelos de formulários para escolher, você pode usar a barra de pesquisa para filtrá-los rapidamente. Para fazer isso, basta digitar 'Formulário de Contato' e aguardar a conclusão da pesquisa.

Para ver um modelo mais de perto, você pode usar o recurso de visualização integrado. Simplesmente passe o mouse sobre qualquer modelo de formulário e clique em ‘Ver Demonstração’.

Depois de encontrar o formulário de contato perfeito para suas necessidades, passe o mouse sobre ele mais uma vez e clique em 'Usar Modelo'.

Isso iniciará o construtor de formulários. Você verá todas as ferramentas de personalização no painel esquerdo e uma visualização ao vivo à direita.

Você pode arrastar elementos do painel esquerdo e soltá-los na visualização ao vivo. Você também pode reorganizar elementos na visualização usando arrastar e soltar.

Role para baixo no painel esquerdo até o grupo Campos Elegantes e, em seguida, arraste e solte o campo HTML diretamente em seu formulário.

Após adicionar o campo HTML, clique nele para abrir suas opções de personalização.

Para começar, digite um ‘Rótulo’ para ajudá-lo a identificar este campo. Isso é apenas para sua referência e não é mostrado aos visitantes, então você pode usar o que quiser. Você também pode deixar o campo em branco.

Em seguida, você inserirá o código HTML personalizado no campo 'Código'.

Para criar uma dica, você pode usar a tag <span> ou simplesmente copiar o código a seguir e colá-lo no campo 'Código':

<span title="We have cool stuff to share every week. :)">Hi there! We have an email newsletter you might want to subscribe to. Let us know in the Comment or Message field, and we'll sign you up.</span>

Este é apenas um código de exemplo, sinta-se à vontade para editá-lo para atender às suas necessidades. A parte title="" do código é exatamente o que diz ao navegador da web para criar o efeito de pop-up ao passar o mouse, para que você obtenha a dica de ferramenta sem adicionar nenhum CSS ao seu site.

Observe que o WPForms não exibe o código HTML na visualização do construtor de formulários. Para testar a dica de ferramenta, clique em ‘Visualizar’.

Isso abrirá uma nova aba.

Aqui, você pode testar se o trecho de código HTML para sua dica de ferramenta funciona corretamente passando o mouse sobre o texto. Após alguns momentos, a dica de ferramenta deverá aparecer.

Quando estiver satisfeito com os resultados, você pode voltar ao construtor de formulários para finalizar seu formulário.

O WPForms configura automaticamente suas configurações de notificação e confirmação para você. No entanto, se desejar personalizá-las, selecione 'Configurações' e, em seguida, 'Notificações' ou 'Confirmações'.

Na seção 'Notificações', você pode adicionar vários destinatários para a submissão do seu formulário de contato.

Para adicionar vários destinatários, separe os endereços de e-mail com vírgulas, como email1@example.com, email2@example.com, email3@example.com.

Depois de personalizar suas notificações e outras configurações, é hora de publicar e incorporar o formulário do WordPress.

Clique no botão 'Incorporar' no canto superior direito do construtor de formulários.

O WPForms perguntará se você deseja adicionar o formulário a uma página existente ou a uma nova página.

Neste guia, escolheremos 'Selecionar Página Existente'.

Na próxima janela pop-up, escolha uma página na lista de páginas disponíveis. Depois disso, você pode clicar em 'Vamos lá!' para abrir o editor de blocos.

Agora, passe o mouse sobre a área onde deseja adicionar o formulário e clique no botão '+'. Em seguida, selecione o bloco WPForms.

Você pode escolher o formulário que deseja exibir, usando o menu suspenso.

Após selecionar seu formulário, o WPForms o carregará no editor de blocos.

Quando estiver satisfeito com a configuração, clique no botão 'Atualizar'.

E pronto! Você adicionou HTML personalizado ao seu formulário de contato WPForms e o publicou em seu site WordPress.

Antes de enviar visitantes reais para o formulário, recomendamos o envio de uma entrada de teste rápida para garantir que tudo funcione.

Após enviar um teste, vá para WPForms » Todos os Formulários. Aqui, passe o mouse sobre seu formulário de contato e clique em 'Entradas' quando ele aparecer.

Na próxima tela, você verá todas as suas submissões de formulário.

A tabela exibe todas as informações que os usuários enviaram, juntamente com a hora exata da submissão.

Perguntas Frequentes: Como Adicionar Formulários HTML no WordPress

Por que meu formulário HTML não está funcionando no WordPress?

Muito provavelmente, o WordPress está exibindo seu formulário, mas não o processando. Simplesmente colar um formulário HTML em uma página não é suficiente para fazê-lo funcionar.

Embora o formulário possa ser exibido corretamente, o WordPress não processa automaticamente os envios de formulário. Ao contrário de um site HTML básico, não há um script integrado para lidar com os dados quando alguém clica em Enviar.

Para tornar o formulário funcional, você precisará adicionar código PHP personalizado para processar os envios ou usar um plugin que cuide disso para você.

Posso personalizar meus formulários se usar HTML?

Sim, absolutamente. Usar HTML lhe dá controle total sobre a aparência e o funcionamento do seu formulário. Apenas tenha em mente que você também será responsável por todo o resto, como:

• Estilizando o formulário com seu próprio CSS
• Adicionando validação, mensagens de erro ou lógica condicional com código personalizado
• Garantir que o formulário funcione corretamente em diferentes dispositivos e navegadores

Então sim, você tem total flexibilidade, mas também total responsabilidade.

Recursos Adicionais: Mais Guias de Formulários do WordPress

Esperamos que este artigo tenha ajudado você a aprender como adicionar formulários HTML no WordPress. Em seguida, você pode querer conferir nossos guias sobre:

• Como Exportar Entradas de Formulário do WordPress para CSV e Excel
• Como Personalizar e Estilizar Seus Formulários WordPress
• Melhores Plugins de Formulário de Contato para WordPress

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.