O básico de todo site ou blog é ter um meio de contato entre o usuário e o administrador da página. Mesmo sites que não possuem itens à venda sempre possuem uma página com um formulário de contato. Isso aproxima os usuários como também oferece uma ferramenta de feedback que o ajudará a melhor atender seu público.

No WordPress não precisamos criar um formulario no php, fazer o action dele muito menos o CSS. Para isso temos os plugins e o mais famoso para realizar esse serviço é o Contact Form 7.

O Contact Form 7 é um dos plugins mais usados e baixados de todos os plugins de formulário de contato. Mas do que adianta ser popular? Adianta que a quantidade de pessoas criando soluções e possibilidades com ele seja tão grande como sua popularidade.

Nesse post vamos abordar seu uso mais básico,  passando por plugins que o complementam, os erros/problemas mais comuns e alguns usos avançados da ferramenta.

Primeiro de tudo, instale o plugin no seu site. Vá em plugins/adicionar novo. Faça uma pesquisa por Contact Form 7, instale e ative o plugin.

Com isso deve aparecer uma opção Contato na lateral esquerda da sua administração. Clicando nela, aparecerá a seguinte tela:

Primeira tela do Contact Form 7

Tela inicial do plugin Contact Form 7

Basicamente, essa é a tela inicial do plugin, assim como a própria tela de configurações. A princípio todas as configurações necessárias são feitas em cada um dos formulários. Essa tela é onde é possível ver todos os formulários criados, nesse exemplo tenho apenas um, e aproveitando a visualização, ele exibe o shortcode para usar esse formulário onde quiser, em um post, página, widget ou diretamente nos arquivos PHP.

Quando você ativa o plugin, automaticamente ele cria esse primeiro formulário chamado Contact form 1. Clicando nele você pode editar seus campos e também o título para facilitar sua administração.

Editando um Formulário de Contato

Tela de edição do Formulário de Contato

Essa é a tela de edição do seu formulário de contato. Veja que editei o título do meu formulário para Contato Principal, e automaticamente ele mudou essa informação no shortcode, portanto será necessário alterar o shortcode na página em que estou usando. Logo abaixo, nessa mesma tela tenho os campos do meu formulário, e por enquanto esses são os campos que vem por padrão ao criar um novo formulário (Nome, E-mail, Assunto e Mensagem). A direita, temos um select para selecionar o campo que deseja inserir ao formulário, vamos continuar o exemplo e vamos adicionar um campos de URL, para as pessoas adicionarem um link quando necessário. Basta clicar no select Gerar tag e escolher o item URL, algumas opções para configurar seu novo campo serão abertas:

Adicionando campo ao formulário

Adicionando campo de URL ao formulário de contato

Nesse exemplo apenas configurei o nome para site-blog, bem abaixo ele exibe dois shortcodes para você montar como desejar que ele apareça no formulário e o segundo shortcode para configurar como receberá a mensagem por e-mail. Adicionei no meu formulário, ficando assim:

Adicionando o campo ao formulário

Adicionando o campo ao formulário

Aqui você pode trabalhar com tags HTML ou simplesmente seguir esse padrão simples que ele oferece. Aqui é possível criar divs com classes para depois aplicar algum CSS, como por exemplo exibir o formulário em duas colunas.

Feito isso, devemos configurar a forma como receberemos essa mensagem por e-mail, obeserve na figura abaixo:

Mensagem do formulário para o e-mail

Mensagem do formulário para o e-mail

A esquerda você adiciona o e-mail que vai receber a mensagem (Para), configura quem está enviando (De), onde adicionamos dois shortcodes que usamos no formulário para capturar nome e -email [your-name] <[your-email]> e o assunto.

A direita temos a montagem de como receberemos essa mensagem por e-mail, o corpo do e-mail. Adicionamos aqui todos os shortcodes que usamos em cada campo do formulário de forma que fique o mais intuitivo possível.

Descendo um pouco mais a página, temos uma área chamada Mensagens. Nesse ponto podemos configurar como quisermos as diferentes mensagens que o fomulário nos retorna dentre as mais variadas situações. São mensagens como: Sua mensagem foi enviada com sucesso. Obrigado. Ou Ocorreram erros na validação. Por favor confira os dados e envie novamente. Assim como mensagens de erros. É muito interessante configurar essas mensagens e ter um formulário o mais próximo do público do seu site possível.

Configurando mensagens

Configurando mensagens

Usando um Formulário

Finalizadas as configurações, clique em salvar, pegue o shortcode gerado e vamos aplicar em uma página Contato, basta adicionar no corpo da página e salvar. Pronto temos um formulário de contato para ser usado pelos usuários do site se comunicarem conosco.

Outra possibilidade é adicionar esse formulário em um widget. Para isso, vá em aparência/widgets e adicione um widget de texto, cole o shortcode do formulário no corpo e salve. Em alguns casos, pode ser que o widget não interprete o shortcode, verifique se o seu tema está com esse filtro habilitado no functions.php:

add_filter('widget_text', 'do_shortcode');

Isso faz com que o widget de texto interprete os shortcodes inseridos nele.

Mais uma forma de usar nosso formulário é adicionando diretamente nos arquivos PHP, para isso use a função nativa do WordPress do_shortcode(), dessa forma:

echo do_shortcode('[contact-form-7]');

Veja a documentação dessa função no Codex.

Complementos

Como falado no início, o que nos ajuda tendo um plugin tão popular como o Contact Form 7 é que diversos desenvolvedores pensam complementos e usos para a ferramenta, vou apresentar aqui algumas delas.

WP Mail SMTP

Em alguns casos o Contact Form 7 não envia os e-mails. Isso acontece porque ele usa a função wp_mail(), mas alguns servidores desabilitam a função mail() do PHP que é usada pelo WordPress. Para contornar isso o modo mais fácil é usar a função de SMTP para o envio, com isso temos um plugin aliado que é o wp mail smtp. Basta instalar e ativar o plugin, vá a tela de configurações configure o seguinte:

  • From Email – Coloque o e-mail que será usado para disparo dos e-mails;
  • Mailer – Selecione Enviar todos os emails via SMTP;
  • Return Path – Importante selecionar essa opção;
  • SMTP Host – Adicione o endereço do seu servidor de SMTP;
  • SMTP Port – A porta desse servidor SMTP, normalmente é 587;
  • Authentication – Selecione como Yes, use SMTP authentication;
  • Username – Repita o e-mail;
  • Password – A senha desse e-mail.

Pronto. Para testar, nessa mesma tela do plugin existe a opção de enviar um e-mail de testes.

CF7 AutoResponder Addon

Essa extensão possui a funcionalidade de habilitar para que ele adicione automaticamente esses contatos na sua lista de e-mails do MailChimp.

Contact Form DB

Essa extensão, como o próprio nome diz, é usado para salvar os formulários de contato preenchidos no banco de dados do WordPress. Nativamente o Contact Form 7 envia as mensagens para o e-mail indicado, mas com esse plugin adicional você pode manter arquivado também na administração do seu site essas mensagens. Além de poder exportar para uma planilha essas mensagens. Muito útil para manter a informação em um único lugar e não perder seus contatos na caixa de e-mail.

Free SMS Add On for Contact Form 7

Encontrei essa extensão mas ainda não consegui testar. Com ela é possível receber um SMS a cada formulário enviado pelo seu site. Na versão free do plugin ele oferece suporte apenas para a operadora Claro.

Uso avançado

Seleção de  Destinatários
É possível adicionar um select ao formulário para filtrar melhor qual e-mail vai receber a mensagem, caso a pessoa queira falar com o atendimento o e-mail será disparado para [email protected], caso queira falar com o suporte a mensagem será disparada para [email protected] Veja a imagem abaixo de como ficou a criação do formulário:

Escolhendo o destinatário

Escolhendo o destinatário

Agora, onde você configura o disparo dessa mensagem, faça o seguinte:

Configurando os destinatários

Configurando os destinatários

A lógica é, ao selecionar o Motivo no formulário, na verdade a pessoa está escolhendo o destinatário para quem ela enviará a mensagem. Com isso, nas configurações pegamos essa informações e fazemos o disparo para esse e-mail. Essa forma de resolver isso é uma possibilidade que o próprio plugin oferece, veja na documentação.

Conclusão

Com esse post você aprendeu a criar um formulário de contato usando o plugin Contact Form 7. Viu como aplicar ele em diversos lugares e como solucionar o erro caso o formulário não enviar as mensagens. Agora é hora de testar e criar novas possibilidades! Instale o plugin no seu site e veja o que ele pode fazer por você. É possível ir muito além de um simples formulário de contato, você pode por exemplo criar um formulário para as pessoas se candidatarem a uma vaga de emprego, colocar um campo para adicionar o currículo e fazer algumas perguntas iniciais. Você pode também criar um formulário para melhorar os seus serviços, o seu atendimento ou qualquer outra coisa, como uma pesquisa. Enfim, mais uma vez estamos aqui apresentando um plugin versátil e que pode lhe ajudar em muitas tarefas do dia a dia!

Você usa o Contact Form 7 ou outro plugin de formulário de contato? Conte-nos nos comentários!