Formulário de contato no WordPress: guia de instalação

Conheça o melhor plugin de formulário de contato para WordPress: Contact Form 7. Saiba como configurá-lo corretamente para enviar e-mails.

Por Fabio Lobo, publicado em 16/02/2021.

Se você tem um site com WordPress mas não instalou um formulário de contato, pode ter certeza de que algum visitante já desistiu de falar com você só por causa disso.

Uma página de contato sem formulário (ou seja, apenas com um endereço de e-mail por escrito) mostra falta de profissionalismo e preguiça.

É como se você estivesse falando para o usuário: “se quiser falar com a gente, se vira aí”.

Sendo assim, fiz esse post:

  • Para quem está colocando o seu site no ar agora e não faz ideia de como criar um formulário de contato no WordPress;
  • Para você que precisa de formulários com mais campos e/ou funções (como respostas automáticas, por exemplo);
  • E para ajudar a solucionar problemas como quando o formulário de contato não envia as mensagens para o seu e-mail.

Vamos lá?!

pessoa enviando um e-mail através de seu laptop; à frente, o texto Formulário de Contato

Melhor plugin de formulário: Contact Form 7

Com tantos novos meios de contato como WhatsApp e chat ao vivo, tem um que ainda resiste bravamente: o formulário de e-mail. A princípio essa ainda é a opção mais profissional e formal para contatos através da internet.

O Contact Form 7 é o plugin de formulário mais utilizado por quem tem sites em WordPress: São mais de 5 milhões de instalações ativas. Então, o foco desse post será esse plugin!

Com o CF7 você pode criar e gerenciar vários formulários de contato, assim como personalizar o que irá chegar por e-mail e até mesmo uma resposta automática.

E o melhor: o plugin é gratuito, então facilita bastante a vida de quem está começando agora e não tem dinheiro para investir em soluções mais robustas.

Passo a passo para instalar o plugin de formulário de contato

Pra começar, veja como instalar um formulário de contato em seu WordPress seguindo os passos abaixo:

  1. Instale e ative o plugin Contact Form 7

    Em seu painel do WordPress, no menu de Plugins, clique em Adicionar novo e pesquise por Contact Form 7. O plugin é do autor Takayuki Miyoshi.
    Mas se você tiver alguma dúvida sobre como instalar plugins no WordPress, confira este manual aqui.printscreen do painel de instalação de plugin

    Esse conteúdo não pode ser exibido em seu navegador.

  2. Configure o formulário de contato

    Após a instalação do plugin, acesse o item Adicionar novo no menu Contato. Na aba Formulário você verá um formulário já pronto, com campos simples (nome, e-mail, assunto, mensagem e botão de envio). Você pode adicionar novos campos clicando nos botões disponíveis.printscreen de edição de formulário

    Esse conteúdo não pode ser exibido em seu navegador.

  3. Formate o que você receberá por e-mail

    Na aba Mail você configura e formata a mensagem que chegará em seu e-mail de acordo com os campos do formulário. Certifique-se de que todos os campos definidos no passo anterior estarão presentes nessa parte.printscreen de edição do modelo de e-mail

    Esse conteúdo não pode ser exibido em seu navegador.

  4. Salve seu formulário de contato

    Ao finalizar as edições dos passos anteriores, defina um nome para seu formulário e clique no botão Salvar. Em seguida aparecerá um shortcode, que é um código com informações entre colchetes. Você deve copiá-lo.printscreen de shortcode do formulário

    Esse conteúdo não pode ser exibido em seu navegador.

  5. Publique o formulário em sua página de contato

    Agora abra a edição da sua página de contato, cole o shortcode e pronto: basta salvar ou publicar!printscreen de inserção de formulário em página

    Esse conteúdo não pode ser exibido em seu navegador.

Repare que esse passo-a-passo foi uma explicação bem básica sobre como criar e publicar um formulário simples.

Então, se você quer tirar mais proveito do Contact Form 7, continue lendo!

Como criar e editar campos no formulário?

Na aba Formulário há uma série de botões que representam cada campo que pode ser inserido em seu formulário de contato.

printscreen de edição do formulário

Ao clicar em um dos botões (no de texto, por exemplo, que é um campo simples), uma janela com opções de personalização como essa irá aparecer:

printscreen de edição de campo do formulário

Veja para que serve cada uma das opções do exemplo:

  • Tipo de campo serve para definir se o campo é obrigatório ou não;
  • Em Nome você pode deixar o texto que o plugin gerar automaticamente (isso não irá aparecer para os visitantes do site);
  • No campo Valor padrão é possível definir um texto para aparecer automaticamente dentro do campo. Pode ser algo fixo ou que desaparece quando o usuário seleciona o campo (para isso utilize a opção Utilize este texto como espaço reservado);
  • Se você tem o plugin Akismet instalado, a opção com o mesmo nome serve para aplicar um filtro anti-spam em alguns campos do formulário (como nome e e-mail);
  • Por fim, em ID do atributo e Classe do atributo é possível definir ID e classes para o campo (ideal se você tem personalizações via CSS ou funções via JavaScript, por exemplo).

Ao clicar em Inserir tag, o campo será inserido em formato de shortcode na área de edição do formulário – algo como [text* nomedocampo class:classe placeholder "Texto padrão"], por exemplo.

Aliás, você pode utilizar tags HTML nessa área para deixar seu formulário personalizado. Veja um modelo de formulário simples que utilizo em uma das páginas da WOWF:

<label for="seu-nome">Seu nome:</label>
[text* your-name id:seu-nome akismet:author] 

<label for="seu-email">Seu e-mail:</label>
[email* your-email id:seu-email akismet:author_email] 

<label for="assunto">Assunto:</label>
[text* your-subject id:assunto] 

<label for="mensagem">O que você precisa?</label>
[textarea* your-message id:mensagem]

[submit "Enviar"]

O resultado final (com as devidas personalizações através do CSS do tema) é esse:

printscreen de formulário de contato

Como formatar o modelo de e-mail?

Na aba Mail é possível personalizar o que você irá receber por e-mail quando alguém preencher seu formulário de contato.

printscreen de edição do modelo de e-mail

Cada campo dessa área funciona da seguinte forma:

  • No campo Para você configura o e-mail que receberá as mensagens.
  • Já no campo De você configura o e-mail usado para enviar essas mensagens – mas como você verá a seguir, o ideal é que seja uma conta de e-mail do mesmo domínio do site.
  • Em Assunto é possível configurar o texto do assunto das mensagens.
  • Em Cabeçalhos Adicionais é recomendável deixar a opção Reply-To: [your-email] para que você consiga responder à pessoa que te enviou a mensagem.
  • Por fim, em Corpo da Mensagem é feita a formatação do e-mail. Você também pode utilizar HTML nessa parte.

Repare que há shortcodes para todos os campos que foram definidos na aba Formulário. No entanto, eles são bem mais simples – há apenas o nome de cada campo entre colchetes.

Ademais, na aba Mensagens você configura as mensagens que podem ser exibidas para o usuário quando ele tenta enviar a mensagem (erros, campos que não foram preenchidos, mensagem enviada etc).

Como criar respostas automáticas?

Ainda na aba Mail há a opção Mail (2), na qual é possível definir o envio de uma mensagem para um segundo destinatário. Assim, é nessa área que você pode configurar uma resposta automática.

printscreen de edição de resposta automática

Como você pode ver, as opções são exatamente as mesmas que constam na mensagem principal.

Nesse caso, em Para você deve adicionar o shortcode correspondente ao e-mail do visitante.

O exemplo ilustrado acima é de mais um formulário da WOWF, dessa vez de pedido de plano de hospedagem. Ao preencher um formulário, o usuário recebe uma resposta automática com um resumo do plano. Veja um recorte desse e-mail:

printscreen de resposta automática enviada por e-mail

Veja que é possível utilizar HTML em Corpo da Mensagem, então você pode deixar a resposta automática muito bem formatada.

Configurando o WordPress para enviar e-mails de um formulário de contato

Como você pode ver acima, ter um formulário de contato no WordPress é muito fácil e o resultado final pode ser bem profissional.

Porém, a coisa pode ficar bem complicada em relação aos disparos – ou seja, envio das mensagens preenchidas nos formulários.

Muitas vezes não basta instalar o formulário e esperar os contatos: é preciso configurar essa parte de envios.

Por que não estou recebendo e-mails do formulário de contato?

Por incrível que pareça, isso é muito comum.

Acontece porque muitos servidores bloqueiam o envio de e-mails assim, sem autenticação, como forma de segurança.

Afinal, é muito fácil seu site acabar sendo alvo de spammers, o que irá destruir a reputação do seu domínio e até mesmo IP, deixando-o marcado como endereço de spams.

E então, quando isso acontece, toda vez que você enviar um e-mail para alguém a mensagem será interpretada como spam.

Também há casos em que a hospedagem simplesmente não fornece suporte a envio de e-mails (ou seja, não consta em seu plano).

Sendo assim, por esses e outros motivos, é recomendável utilizar servidores autorizados para envio de e-mails através de sites em vez de servidores genéricos de hospedagem.

A melhor forma de fazer isso é utilizar seu próprio provedor de e-mails (como Google Workplace, Zoho Mail, Yandex Mail ou até mesmo o Gmail) ou algum serviço especializado (como Mailgun ou SendGrid, por exemplo).

A solução mais simples, além de gratuita, é utilizar sua própria conta de e-mail.

Como configurar o WordPress para disparos de e-mail?

O plugin WP Mail SMTP by WPForms faz com que as mensagens do formulário de contato do seu site WordPress seja disparado utilizando o SMTP da sua conta de e-mail.

Mas não se preocupe: isso é bem fácil de configurar. O primeiro passo é instalar o plugin:

printscreen de instalação do plugin

Lembrando: em Plugins, clique em Adicionar novo, e então pesquise por WP Mail SMTP. Na lista de plugins, clique em Instalar agora e, quando a instalação for concluída, em Ativar.

Em seguida, no menu do seu WordPress, clique em WP Mail SMTP e Configurações.

printscreen de configuração do plugin

A primeira coisa que você deve fazer é cadastrar o email que será utilizado para disparos em E-mail do remetente. O ideal é que esse e-mail seja do mesmo domínio do seu site.

Marque também a opção Forçar e-mail remetente, porque isso garante com que o WordPress como um todo utilize exatamente esse endereço de email para os envios.

Em Nome do remetente você deve cadastrar o nome que aparecerá nas mensagens de e-mail. Por fim, em Mailer, selecione a opção desejada de acordo com seu provedor de e-mail.

Eu utilizo o Zoho Mail, mas mesmo assim seleciono a opção Outro SMTP porque acho mais fácil de configurar:

printscreen de configuração do plugin

Se você selecionar a mesma opção, siga então as recomendações de SMTP do seu servidor para Host do SMTP, Criptografia e Porta SMTP.

Certifique-se de marcar como ativa a opção Autenticação, que é obrigatória na maioria dos servidores.

Por fim, preencha o campo Usuário SMTP com o endereço de e-mail que fará os disparos e o campo Senha SMTP com a senha deste mesmo e-mail.

Para facilitar, mais abaixo há dados do servidor SMTP do Google, Zoho e Yandex:

Dados SMTP do Google Workspace / Gmail

  • Host do SMTP: smtp.gmail.com
  • Criptografia: TLS
  • Porta: 587
  • Autenticação: sim
  • Usuário SMTP: seu endereço de e-mail
  • Senha SMTP: a senha do seu endereço de e-mail

Dados SMTP do Zoho Mail

  • Host do SMTP: smtp.zoho.com
  • Criptografia: TLS
  • Porta: 587
  • Autenticação: sim
  • Usuário SMTP: seu endereço de e-mail
  • Senha SMTP: a senha do seu endereço de e-mail

Dados SMTP do Yandex Mail

  • Host do SMTP: smtp.yandex.com
  • Criptografia: SSL
  • Porta: 465
  • Autenticação: sim
  • Usuário SMTP: seu endereço de e-mail
  • Senha SMTP: a senha do seu endereço de e-mail

Teste para ver se está tudo funcionando como deveria!

Para testar o envio de e-mails, no painel do WP Mail SMTP há a aba Teste de e-mail. Basta colocar seu e-mail em Enviar para e clicar em Enviar e-mail.

Depois de alguns segundos, cheque se você recebeu o e-mail. Caso ocorra algum erro, o próprio plugin irá avisar na mesma tela, logo abaixo do botão de envio.

printscreen de teste do plugin

Não se esqueça de checar sua pasta de spams durante os testes.

Além disso, teste também todos os seus formulários de contato como se você fosse um cliente. Veja se os campos estão configurados corretamente, se não há erros e se, de fato, você recebe as mensagens de e-mail como deveria.

Caso ocorra algum problema com a entrega dos e-mails, você deve entrar em contato com o suporte do servidor de e-mails para resolução de problemas e/ou orientação.

Tenha backups de e-mails e contatos no WordPress com o plugin Flamingo

Pra finalizar, o plugin Flamingo é indispensável para quem utiliza o Contact Form 7.

Sua função é simples: quando instalado, o plugin irá armazenar em seu painel WordPress todas as mensagens recebidas através de formulários de contato e até mesmo os dados de contato de comentários realizados em seu site.

printscreen de instalação de plugin

Para instalar o Flamingo, basta seguir os passos básicos: em Plugins, clique em Adicionar novo, e então pesquise por Flamingo. Na lista de plugins, clique em Instalar agora e, quando a instalação for concluída, em Ativar.

Não é preciso configurar nada. Ou seja, o plugin irá coletar os dados de todos os formulários automaticamente a partir do momento em que estiver ativo.

Então, mesmo que você não esteja recebendo as mensagens em sua conta de e-mail, estará tudo armazenado em seu painel do WordPress.

Créditos das imagens: Freepik e sites citados.

Revisão

Conseguiu instalar o formulário de contato no seu WordPress? Se tiver dúvidas, confira as perguntas e respostas abaixo:

Por que um site deve ter um formulário de contato?

Porque é minimamente profissional e facilita a vida do usuário.

Qual é o melhor plugin de formulário para WordPress?

O melhor (e mais usado) plugin de formulário de contato para WordPress é o Contact Form 7. Só para ilustrar, esse plugin é utilizado por mais de 5 milhões de sites.

Por que o formulário de contato no WordPress não envia os e-mails?

Alguns servidores bloqueiam ou não oferecem suporte para envio de e-mails. Entretanto, é possível configurar esses envios com o plugin WP Mail SMTP. Em suma, você deve utilizar sua própria conta de e-mail para fazer os disparos de formulários do seu site.

A cópia dos conteúdos e trabalhos deste site não é permitida. Saiba mais clicando aqui!

Quem é Fabio Lobo?

Web designer, desenvolvedor front-end e programador WordPress.

Quem é Fabio Lobo?

Estou há mais de uma década na área. O foco do meu trabalho é em usabilidade, facilidade pro usuário, acessibilidade, SEO e performance.

Também tenho alguns projetos open source, além de prestar consultoria em hospedagem WordPress e criação de conteúdo.

Como posso te ajudar hoje?

Trabalho com consultoria, suporte, manutenção, criação e desenvolvimento.

Fale comigo

Leia também...

...alguns textos que têm a ver com o assunto:

E-mail com domínio próprio: guia e comparações

Saiba como ter um e-mail domínio com domínio próprio, personalizado para seu negócio. Compare Zoho Mail, Yandex Mail e Gmail da Google Workspace – as melhores hospedagens de e-mail!

Site do zero: da criação ao lançamento

Veja o processo de criação de um site do zero: do rascunho ao layout, do desenvolvimento à hospedagem. E o que fazer depois que o site for para o ar? Tire suas dúvidas!

Como deixar imagens menores e mais leves

Precisando deixar imagens mais leves para ocupar menos espaço e aumentar a velocidade de carregamento? Saiba como otimizar imagens sem perder qualidade!

Deixe seu comentário

Se você deseja um orçamento, entre em contato clicando aqui.

Quero um orçamento