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

Já adicionou um formulário HTML ao seu site WordPress, apenas para descobrir que ele parece bom, mas na verdade não funciona? Você não está sozinho.

Muitos proprietários de sites se deparam com esse problema frustrante, perguntando-se por que o formulário deles não envia submissões ou não se conecta corretamente.

A razão é simples: o WordPress não trata os formulários da mesma forma que um site HTML padrão. Portanto, se você apenas copiar e colar um formulário HTML bruto, ele geralmente não funcionará sem etapas extras.

Em nossos próprios sites, usamos o plugin WPForms porque ele cuida de toda a configuração nos bastidores para nós. Ainda assim, sabemos que muitos usuários preferem trabalhar com formulários HTML personalizados para manter as coisas leves, ter controle total sobre o código e reduzir a dependência de plugins.

Neste guia, mostraremos 2 maneiras comprovadas de adicionar formulários HTML ao WordPress – e garantir que eles funcionem de fato. Se você está apenas começando ou se sente confortável com código, poderá criar um formulário funcional sem todo o tentativa e erro. 💡

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

Formulários HTML funcionam de forma muito semelhante a outros formulários de sites. Eles permitem que os visitantes digitem e enviem informações como nomes, endereços de e-mail, feedback, pedidos e muito mais.

O que os diferencia é que os formulários HTML são criados usando código HTML em vez de um editor visual de arrastar e soltar como um plugin de formulário. Portanto, você precisará definir campos como caixas de texto, caixas de seleção, botões de rádio e menus suspensos você mesmo. Você decide como eles se parecem e define regras específicas para o funcionamento deles.

Aqui estão algumas vantagens de criar formulários do zero usando HTML:

• Desempenho Otimizado. Formulários HTML tendem a carregar mais rápido e usar menos memória porque o código é leve.
• Controle. Você terá controle total sobre o design e a funcionalidade do formulário porque não está limitado pelos recursos de um construtor de formulários.
• Personalização. Formulários HTML podem ser adaptados exatamente às suas necessidades, oferecendo personalização de formulários mais flexível.

Embora criar formulários HTML do zero seja uma ótima maneira de aprender e praticar codificação, isso tem seus próprios desafios.

Você pode ter problemas com a compatibilidade entre navegadores, onde o formulário funciona de maneira diferente em diferentes navegadores da web.

Além disso, com base em nossa experiência, lidar com a validação de formulários com JavaScript pode ser complicado. É necessário um teste completo para garantir que você possa coletar e processar todas as entradas do usuário corretamente.

Dito isso, existem maneiras de adicionar formulários HTML sem essas complexidades. Portanto, não importa se você está gerenciando um blog WordPress, um site de negócios ou uma loja online, você pode facilmente adicionar formulários HTML ao seu site sem ter que codificar do zero.

Nas seções a seguir, mostraremos como adicionar formulários HTML ao WordPress. Aqui está uma visão geral rápida dos 2 métodos que abordaremos neste guia:

Pronto? Vamos começar.

Método 1: Adicionando Formulários HTML no WordPress Usando o Plugin HTML Forms (Fácil)

Uma maneira fácil de adicionar um formulário HTML a um site WordPress é usar um plugin de formulário gratuito como HTML Forms. É uma ótima ferramenta para criar e configurar formulários HTML em um só lugar, para que você não precise lidar com nenhuma configuração do lado do servidor.

Neste guia, usaremos a versão gratuita do plugin, que inclui tudo o que você precisa para criar um formulário HTML.

Para começar, vamos garantir que você tenha o plugin instalado 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, você pode navegar para Formulários HTML » Adicionar Novo no painel de administração do WordPress para começar a criar seu formulário de contato.

Isso o redirecionará para a página ‘Adicionar Novo Formulário’.

A partir daqui, a primeira coisa que você precisará fazer é nomear seu formulário, simplesmente digitando o nome no campo ‘Título do Formulário’. Por exemplo, nomeamos nosso formulário como ‘Inscrição para Newsletter’.

Em seguida, clique no botão ‘Criar Formulário’ abaixo do campo.

Assim que fizer isso, a página ‘Editar Formulário’ aparecerá e você poderá começar a personalizar seu formulário de contato HTML.

Na parte superior da aba, você verá os detalhes do seu formulário, incluindo o título do formulário, slug e shortcode. Você não precisa memorizar esses detalhes, pois eles estarão disponíveis no painel de Formulários HTML quando você precisar deles.

Abaixo desses detalhes, você encontrará as abas do menu. Na aba ‘Campos’, você pode ver vários botões de campo, como ‘Texto’, ‘Datas’, ‘Caixas de Seleção’ e ‘Botões de Rádio’, para adicionar aos seus formulários.

Vamos rolar um pouco mais para baixo.

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

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

Agora, digamos que você queira adicionar um novo campo com uma inscrição para newsletter por e-mail. Em seguida, basta clicar em um dos botões de campo acima de ‘Código do Formulário’.

Por exemplo, usaremos um campo de lista suspensa e criaremos uma opção ‘Sim/Não’.

A partir daqui, você desejará clicar em ‘Dropdown’ (Lista Suspensa), e isso abrirá as opções de configuração do campo de lista suspensa. Você pode começar a preencher os detalhes, que incluem o rótulo e as escolhas do campo.

Após inserir os detalhes, você pode clicar em ‘Adicionar Campo ao Formulário’.

Em seguida, você deverá ver a tag do campo de lista suspensa na seção ‘Código do Formulário’. Simplesmente role para baixo na aba para conferir.

O próximo passo é reorganizar o formulário de contato.

Para manter um bom fluxo, você desejará que o campo de lista suspensa fique logo abaixo do campo ‘E-mail’.

Para movê-lo, você pode cortar a tag do campo de lista suspensa da primeira tag <p> até a última </>. Em seguida, prossiga e cole-a logo abaixo da tag ‘E-mail’.

O campo padrão ‘Assunto’ pode não ser necessário para um formulário de inscrição de newsletter. Portanto, recomendamos remover o campo.

Você pode fazer isso excluindo sua tag da primeira <p> até a última </p>.

Após mover e excluir tags, você desejará rolar para baixo na aba até a seção ‘Visualização do Formulário’.

Nesta seção, você pode verificar se moveu e excluiu os campos com sucesso sem quebrar nada. Você também pode verificar se o menu suspenso funciona corretamente.

Quando estiver satisfeito com os resultados, prossiga e clique no botão azul ‘Salvar Alterações’ abaixo da seção ‘Código do Formulário’.

Assim que o processo de salvamento for concluído, você deverá ver uma notificação ‘Formulário atualizado.’ no topo desta página.

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

Basta clicar em ‘Mensagens’ para abrir a aba.

Esta aba permite que você edite o texto pré-definido para quando o envio do formulário de um usuário for bem-sucedido e outras situações semelhantes.

Se tudo parecer bom para você, então você pode deixar como está. Se você fez alguma alteração, não se esqueça de clicar no botão ‘Salvar Alterações’ para não perder seu progresso.

Em seguida, vamos para a aba ‘Configurações’.

Por padrão, o HTML Forms definirá ‘Sim’ para salvar cada envio de formulário e ‘Não’ para ocultar o formulário após um envio bem-sucedido. Você pode personalizar isso conforme necessário.

Em seguida, em ‘Redirecionar para URL após Inscrições Bem-sucedidas’, você pode copiar e colar o URL de uma página da web ativa do seu site WordPress. Ou, digite 0 no campo para manter os usuários na página após um envio de formulário bem-sucedido.

Quando tudo estiver configurado, tudo o que resta a fazer é adicionar o formulário de contato HTML a uma página do WordPress.

Vamos acessar Posts ou Páginas » Todos os Posts ou Todas as Páginas no painel do WordPress.

Para este guia, adicionaremos o formulário HTML à nossa página ‘Contato’.

Portanto, passaremos o mouse sobre a página ‘Contato’ na lista e clicaremos em ‘Editar’ quando ela aparecer.

Isso iniciará o editor de blocos da página ‘Contato’.

No editor, você pode começar a escolher uma área para adicionar o formulário. Em seguida, basta passar o mouse sobre ele e clicar no botão ‘+’ para adicionar o bloco HTML Forms.

Agora, você pode digitar ‘HTML Forms’ na barra de pesquisa para encontrar rapidamente o bloco. Assim que tiver o resultado da pesquisa, clique nele.

Você verá um menu suspenso no bloco ‘HTML Forms’. Basta expandi-lo e selecionar o formulário que deseja exibir. Aqui, estamos escolhendo o formulário ‘Inscrição na Newsletter’ que acabamos de criar.

O formulário aparecerá quando você publicar seu conteúdo. Portanto, depois de selecionar o formulário no menu suspenso, você pode clicar no botão ‘Atualizar’.

Aí está! Seu formulário agora está ativo e os usuários podem se inscrever na sua newsletter.

Veja como pode ficar no seu site:

Para ver os envios de formulário, você pode primeiro ir para Formulários HTML » Todos os Formulários. Isso o levará à lista de todos os seus Formulários HTML.

Em seguida, basta passar o mouse sobre um formulário e clicar no botão ‘Envios’ quando ele aparecer.

A partir daqui, você pode ver todos os seus envios de formulário.

A tabela ‘Envios’ detalha todas as informações que os usuários preencheram em seu formulário. Em seguida, há a coluna ‘Timestamp’, que informa quando eles enviaram o formulário.

Por exemplo, aqui, o primeiro envio foi feito por ‘Usuário 1’.

Na tabela, podemos ver que o usuário enviou o formulário em 25 de junho, por volta das 13h. Além disso, ‘Usuário 1’ respondeu ‘Talvez Mais Tarde’ à pergunta ‘Você quer se inscrever em nossa newsletter’. Portanto, neste caso, você não deve adicionar o endereço de e-mail deles à sua lista de mala direta.

Método 2: Adicionando HTML Personalizado a Formulários do WordPress com WPForms

Outra abordagem para criar formulários HTML é usar um construtor de formulários. Embora este método não permita que você codifique seus formulários do zero, ele permite que você os personalize adicionando trechos de código HTML.

Por exemplo, você pode usar HTML personalizado para exibir uma breve mensagem de aviso em um formulário de checkout com um link para sua página de ‘Política de Reembolso e Devolução’. Ou você pode adicionar uma barra de progresso para que os usuários saibam o quão perto estão de completar o formulário. O HTML personalizado pode até permitir que você insira emojis ou adicione uma dica de ferramenta.

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

Em nosso site WPBeginner, nós o utilizamos para formulários de contato, pesquisas anuais e solicitações de migração de site. Obtenha mais informações sobre este plugin em nossa análise detalhada do WPForms.

O WPForms vem com complementos abrangentes de um clique e integrações de terceiros. Por exemplo, você pode instalar o complemento de Abandono de Formulário para rastrear e reduzir o abandono de formulários e muito mais!

Portanto, o WPforms torna a extensão da funcionalidade do seu formulário mais fácil do que se você codificasse seu formulário do WordPress do zero.

Antes de começarmos, vamos garantir que você tenha o WPForms instalado e ativado em seu site WordPress. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você pode navegar até WPForms » Configurações para inserir seu código de licença. Após inserir a chave, basta clicar no botão ‘Verificar Chave’ para iniciar a verificação.

Concluído, você pode começar a criar seu formulário e adicionar HTML personalizado. Para este guia, mostraremos como adicionar uma dica de ferramenta simples ao seu formulário de contato.

Uma dica de ferramenta é como uma pequena caixa pop-up que aparece quando você passa o mouse sobre um elemento da web. É útil, pois permite que os usuários aprendam mais sobre um elemento específico da web sem clicar ou sair da página em que estão.

Mas primeiro, vamos criar o formulário de contato. Simplesmente vá para WPForms » Adicionar Novo na sua área de administração do WordPress para começar.

Isso abrirá o painel ‘Configuração’, onde você primeiro precisará nomear seu formulário. Este nome é apenas para sua referência, então você pode usar o que quiser.

O próximo passo é selecionar como você deseja construir seu formulário.

Com o WPForms, você pode criar formulários usando o construtor de formulários com IA, um modelo pré-fabricado ou do zero.

Se você quiser usar o construtor com IA, tudo o que você precisa fazer é inserir um prompt simples. A IA criará o formulário para você em alguns segundos.

Para este tutorial, porém, demonstraremos usando um modelo pré-construído.

Como existem mais de 2.000 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 esperar a pesquisa ser concluída.

Se você quiser explorar cada resultado da pesquisa para ver como é o formulário, pode aproveitar o recurso de visualização. Simplesmente passe o mouse sobre o 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.

Agora, todas as ferramentas de personalização estão no painel esquerdo, e a visualização ao vivo do formulário está no lado direito da sua tela.

Nesta página inteira, você pode usar o recurso de arrastar e soltar para adicionar elementos do painel de personalização à visualização ao vivo. Você também pode usar o recurso para mover campos na visualização ao vivo.

Vamos tentar adicionar o campo HTML ao formulário. Tudo o que você precisa fazer é rolar para baixo no painel esquerdo e, em seguida, arrastar e soltar 'HTML' no formulário.

Após inserir o campo HTML, você pode clicar nele para abrir suas opções de personalização. Aqui, a primeira coisa a fazer é preencher o 'Rótulo' do campo. Você também pode deixá-lo em branco.

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

Para criar uma dica de ferramenta, você pode usar a função '<span>' ou simplesmente copiar o seguinte código 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, portanto, sinta-se à vontade para editar nossa cópia para melhor atender às suas necessidades.

Observe que o WPForms não exibe o código HTML na visualização do construtor de formulários. Para visualizar o campo e garantir que tudo esteja correto, você pode salvar as alterações primeiro e clicar em ‘Visualizar’.

Isso o levará a uma nova aba.

Agora, vamos testar se o trecho de código HTML para sua dica de ferramenta funciona corretamente. Simplesmente passe o mouse sobre o texto e espere a dica de ferramenta aparecer por alguns segundos.

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

Suas configurações de notificação e confirmação de formulário já estão configuradas no WPForms. No entanto, se você quiser personalizá-las, vá em ‘Configurações’ e depois ‘Notificações’ ou ‘Confirmações’.

Na seção ‘Notificações’, você pode adicionar múltiplos destinatários para o envio do seu formulário de contato.

Você verá uma breve instrução se passar o mouse sobre o botão de ponto de interrogação ao lado do campo ‘Enviar para Endereço de E-mail’. Você vai querer segui-la para garantir que sua notificação seja enviada para os endereços de e-mail corretos.

Você também pode editar o texto pré-definido para a linha de assunto do seu e-mail.

Por exemplo, nós mudamos o nosso de ‘Nova Entrada: Formulário de Contato’ para ‘Você tem uma nova mensagem: Contato novo’.

Depois de personalizar suas notificações, você vai querer passar para o painel ‘Confirmação’.

Por padrão, o WPForms define seu tipo de confirmação como ‘Mensagem’ e tem o texto pré-definido pronto para você. Você pode definitivamente alterar essas configurações se quiser.

Além de mostrar uma mensagem de confirmação, você pode redirecionar os usuários para uma nova página ou um URL específico.

Assim que tudo estiver configurado, é hora de publicar e incorporar o formulário do WordPress.

Vá em frente e clique no botão ‘Incorporar’ para começar a publicar. O WPForms então perguntará se você deseja adicionar o formulário a uma página existente ou a uma nova. Neste guia, escolheremos ‘Selecionar Página Existente’.

Na próxima janela pop-up, você escolherá uma página da lista de páginas disponíveis. Depois disso, você pode clicar em ‘Vamos!’ para ir ao editor de blocos da página.

Agora, você pode passar o mouse sobre a área onde deseja colocar o formulário e clicar no botão ‘+’. Prossiga e selecione o bloco WPForms.

Em seguida, você pode escolher um formulário no menu suspenso do bloco WPForms.

Depois de selecionar um formulário, o WPForms o carregará na área de conteúdo selecionada. Se você quiser mostrar o título do formulário, vá para a guia ‘Bloco’ no painel direito e ative o controle deslizante ‘Mostrar Título’.

Quando estiver satisfeito com tudo, prossiga e 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.

Agora, os usuários podem começar a preencher o formulário e possivelmente se inscrever em sua newsletter por e-mail.

Para ver todas as submissões de formulário do WPForms, navegue até WPForms » Todos os Formulários.

Em seguida, você pode passar o mouse sobre ‘Formulário de Contato’ ou qualquer formulário da lista e clicar em ‘Entradas’ quando o botão aparecer.

Na próxima tela, você deverá ver todas as submissões do seu formulário.

A tabela detalha todas as informações que os usuários enviaram com o formulário, bem como o horário da submissão.

Por exemplo, em 2 de julho, por volta das 8h, ‘Usuário 3’ disse que queria se inscrever na newsletter por e-mail e deixou uma pergunta sobre como entrar em contato com nossa equipe de suporte ao cliente.

Também podemos ver a coluna ‘Ações’. Nesta coluna, existem vários botões: ‘Visualizar’, ‘Editar’, ‘Spam’ e ‘Lixo’.

Se você clicar em ‘Visualizar’, o WPForms o levará para uma página de visão geral dedicada de uma entrada. Nesta página, o plugin incentiva você a ativar dois complementos.

O primeiro é o complemento de Geocalização para rastreamento, onde o usuário envia o formulário. O segundo é o complemento de Jornada do Usuário, que pode ajudá-lo a analisar o caminho do usuário em seu site até que ele clique no botão ‘Enviar’.

Recomendamos a instalação e ativação desses complementos para um desempenho mais otimizado do formulário.

Os botões ‘Spam’ e ‘Lixo’ são úteis para marcar envios falsos e removê-los da sua entrada. Para saber mais sobre como reduzir envios falsos de formulários, você pode ler nosso guia sobre como bloquear spam de formulários de contato.

Dica Bônus: Carregando uma Página HTML Personalizada para o WordPress

Você também pode estar procurando uma maneira de fazer upload de uma página HTML personalizada para o seu site WordPress. Isso pode ser útil se você tiver um modelo estático que deseja usar ou uma página HTML de um site antigo.

A regra geral é fazer o upload de uma única página HTML sem arquivos CSS ou de imagem separados. No entanto, se a página que você deseja fazer upload incluir arquivos CSS e imagens separados, você deverá colocá-los em uma estrutura de diretórios.

AIOSEO, o melhor plugin de SEO para WordPress, pode ajudá-lo com isso.

Para saber mais, consulte nosso guia para iniciantes sobre como fazer upload de uma página HTML para o WordPress sem erros 404.

Perguntas Frequentes: Como Adicionar Formulários HTML no WordPress

Respondemos a algumas perguntas comuns para ajudá-lo a adicionar formulários HTML ao WordPress com facilidade.

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

É um problema comum. O WordPress não processa automaticamente os envios de formulários como um site HTML comum faria quando combinado com scripts do lado do servidor. Portanto, se você simplesmente colar um formulário HTML básico, ele pode parecer bom, mas na verdade não fará nada quando alguém clicar em “enviar”.

Isso ocorre porque o WordPress não inclui nenhum tratamento integrado para dados de formulário. Em um site HTML padrão, os desenvolvedores geralmente conectam formulários a scripts como form-handler.php para processar a entrada. No WordPress, você precisará adicionar seu próprio código PHP personalizado ou usar um plugin para tornar o formulário funcional.

Em resumo, exibir o formulário é fácil, mas fazê-lo funcionar requer um pouco de configuração extra.

Como posso garantir que minhas submissões de formulário sejam processadas?

A maneira mais fácil é usar um plugin de formulário de contato como WPForms e Formidable Forms. Ele cuida de todas as tarefas de bastidores, como o processamento de submissões, o envio de notificações e o bloqueio de spam, para que você não precise configurar tudo manualmente.

Posso personalizar meus formulários se usar HTML?

Absolutamente! Se você se sente confortável trabalhando com código, usar HTML puro lhe dá controle total sobre a estrutura do seu formulário. Apenas tenha em mente:

• Você precisará escrever seu próprio CSS para estilizar elementos como layouts, cores e espaçamento.
• Validação de formulário, mensagens de erro ou lógica condicional exigirão JavaScript personalizado ou código do lado do servidor.
• E você também é responsável por garantir que o formulário funcione em diferentes navegadores e dispositivos.

Então, sim, você tem total liberdade, 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 Criar um Formulário de RSVP no WordPress
• Como Criar um Formulário de Reserva Online no WordPress
• Como Criar um Formulário WordPress com Seletor de Data
• Como Criar Formulários Multilíngues no WordPress
• Como Criar Formulários Conversacionais no WordPress
• Como Estilizar e Personalizar Seus Formulários do WordPress
• Como Exportar Entradas de Formulário do WordPress para CSV e Excel
• Guia Definitivo para Usar Formulários 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.