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

Você tem um formulário HTML pronto para usar, mas adicioná-lo ao WordPress se torna uma tentativa e erro.

A razão é simples: o WordPress não lida com formulários da mesma forma que um site HTML comum. Se você simplesmente copiar e colar o código do formulário, ele muitas vezes não funcionará corretamente sem algumas etapas extras.

Em nossos próprios sites, usamos o plugin WPForms porque ele cuida de toda a configuração para nós. Dito isso, sabemos que muitos usuários preferem usar formulários HTML personalizados para manter as coisas leves, ter controle total sobre seu código ou evitar adicionar outro plugin.

Neste guia, mostraremos 2 maneiras fáceis de adicionar formulários HTML no WordPress, para que seu formulário apareça corretamente, funcione como esperado e não quebre seu site. 💡

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

Formulários HTML funcionam de forma semelhante a outros formulários de site. 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 em vez de um editor visual de arrastar e soltar como um plugin de formulário. Isso significa que você precisa definir campos como caixas de texto, caixas de seleção, botões de rádio e menus suspensos você mesmo.

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:

• Método 1: Adicionando Formulários HTML no WordPress Usando o Plugin HTML Forms (Fácil)
• Método 2: Adicionando HTML Personalizado a Formulários do WordPress com WPForms
• Dica Bônus: Carregando uma Página HTML Personalizada para o WordPress
• Perguntas Frequentes: Como Adicionar Formulários HTML no WordPress
• Recursos Adicionais: Mais Guias de Formulários do WordPress

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 básico.

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 digitando o nome no campo 'Título do Formulário'. Por exemplo, nomeamos nosso formulário como 'Inscrição na 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.

No topo da página, 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.

Agora, role 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 seleção (dropdown) e criaremos uma opção 'Sim/Não' para a inscrição na newsletter.

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’.

Como este plugin não possui um construtor de arrastar e soltar, você precisará mover o código manualmente. Vá em frente e corte o código do campo de seleção (da tag de abertura até a tag de fechamento
tag).

Em seguida, simplesmente cole esse trecho de código logo após a tag de fechamento do campo 'Email'.

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 fizer 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 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’.

Seu formulário agora está no ar e os usuários podem se inscrever na sua newsletter. Veja como ele 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 é usar um construtor de formulários de contato visual. Esta é a melhor opção se você quiser construir o formulário visualmente, mas precisar inserir elementos HTML específicos, como um link, um formato de texto ou uma dica, usando código.

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 de ‘Configuração’, onde você primeiro precisará nomear seu formulário. Este nome é apenas para referência interna, 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, no entanto, usaremos 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, você pode usar o recurso de arrastar e soltar para adicionar elementos do painel esquerdo à 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 tag <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, sinta-se à vontade para editar o texto para 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 Geolocalização para rastrear de onde o usuário envia o formulário. O segundo é o complemento de Jornada do Usuário, que pode ajudar você a analisar o caminho do usuário pelo 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 ‘Lixeira’ são úteis para marcar submissões falsas e removê-las das suas entradas. Para saber mais sobre como reduzir submissões falsas 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.

Como regra geral, você pode enviar uma única página HTML sem arquivos CSS ou de imagem separados diretamente.

Mas, se a página que você deseja enviar inclui arquivos CSS e imagens separados, você precisará enviá-los em uma pasta, mantendo a mesma estrutura de diretório usada no seu arquivo HTML.

AIOSEO, o melhor plugin de SEO para WordPress, pode ajudar os mecanismos de busca a encontrar sua página HTML personalizada adicionando-a aos seus sitemaps XML.

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?

Este é um problema comum. No WordPress, simplesmente colar um formulário HTML geralmente 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ê.

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

A opção mais fácil é usar um plugin de formulário de contato como WPForms ou Formidable Forms. Esses plugins cuidam de tudo nos bastidores, incluindo salvar entradas, enviar notificações por e-mail e bloquear spam, para que você não precise configurar tudo sozinho.

Posso personalizar meus formulários se usar HTML?

Sim, absolutamente. Usar HTML lhe dá controle total sobre como seu formulário se parece e funciona. Apenas lembre-se de que você também será responsável por todo o resto, como:

• Estilizar o formulário com seu próprio CSS
• Adicionar 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 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.