Como criar um formulário de contato no WordPress (passo a passo)

Aprenda como criar um formulário de contato personalizado em seu site WordPress usando o plugin mais popular da internet.

O formulário de contato é uma ferramenta essencial para qualquer blog ou site por permitir a interação entre um visitante e o autor do conteúdo. É por isso que a página “contato” e formulários se fazem presentes desde o início do desenvolvimento de sites mais dinâmicos.

Além de possibilitar feedback dos leitores do blog, oportunidades de parceria, solução de problemas e até mesmo geração de leads, um bom formulário de contato faz tudo isso organizadamente, permitindo que a conversa continue em uma área fechada e mais propícia para conversas mais sérias, o e-mail.

No artigo de hoje mostraremos como criar um formulário de contato da maneira mais fácil possível. Utilizaremos principalmente a plataforma WordPress com plugins voltados para esse propósito. Mas também conversaremos sobre a necessidade ou não de um formulário de contato. 

Por ser um tutorial, pedimos que faça todos os passos solicitados com atenção, para garantir que o resultado seja um formulário funcional, fácil de preencher e de sucesso.

O que é um formulário de contato?

Um formulário de contato é uma ferramenta digital composta por campos de preenchimento. Nela, o visitante que deseja ter interação com o autor de um blog preenche cada um dos campos solicitados e, por último, clica no botão “Enviar mensagem”, para que essa mesma mensagem chegue na caixa de entrada do criador do blog.

Vantagens de ter um formulário de contato

Ter um formulário de contato no seu blog possui uma série de vantagens a serem consideradas, são elas:

  • Conversa privada: diferente de comentários ou outras formas de contato, as mensagens enviadas através do formulário permitem mais privacidade por serem efetuadas exclusivamente pelo endereço de e-mail cadastrado.
  • Sem necessidade de apps externos: uma vez que o formulário esteja funcionando, não é necessário instalar mais nada, apenas aguardar as mensagens na sua caixa de entrada.
  • Possibilidade de ter mais informações sobre o usuário: com um formulário temos a opção de fazer com que o visitante preencha os campos que acharmos necessário, como: sexo, número de telefone, cidade, dentre outras opções.
  • Mais organização de suporte: caso utilize seu formulário para suporte, é mais organizado por utilizar e-mails, assim se pode responder às mensagens no devido tempo, sem a necessidade da agilidade esperada de aplicações como WhatsApp ou Telegram.

Desvantagens de ter um formulário de contato

Embora as vantagens de ter um formulário de contato no seu site WordPress sejam enormes, há algumas desvantagens, como:

  • Maior afastamento entre seu visitante e você: diferente de um contato direto por WhatsApp ou Instagram, o formulário de contato pode se tornar uma espécie de barreira. Caso seu conteúdo ou blog seja mais pessoal e não há dificuldade em interagir em outas redes sociais, pode ser interessante pensar em estratégias diferentes.
  • SPAM: lidar com SPAM nos e-mails recebidos pelo formulário de contato pode ser uma dor de cabeça e um desafio enorme para lidar. Embora existem plugins com esse objetivo, eles não são 100% eficazes, uma vez que novas formas de SPAM são criadas diariamente.
  • Aumento do tempo dedicado a responder mensagens: se o seu formulário de contato for muito utilizado pelos visitantes, é garantido que se invista bastante tempo para responder todas as pessoas. Portanto, pense bastante no fluxo de resposta terá. A maioria dos blogs possui poucos contatos, então isso não tende a ser um problema para eles.

Plugins para formulário de contato no WordPress

1. Contact Form 7

O Contact Form 7, também conhecido por CF7, é o principal plugin de formulário para WordPress. Por muitos anos ele está em destaque na própria plataforma devido a uma característica extremamente prática: ele é fácil de utilizar.

Em questões de privacidade, o Contact Form 7 tende a ser muito efetivo, pois não precisa: 

  • Rastrear usuários, 
  • Gravar dados pessoais, 
  • Enviar dados para servidores externos.
  • Ou utilizar cookies.

Inclusive, dentre suas vantagens, há a integração com outros plugins, como o Flamingo, que permite salvar as mensagens também no painel do WordPress, ao invés de apenas por e-mail. Dessa forma, se pode utilizar como plataforma para captura de leads. 

2. Formulário de contato do WPForms — Arraste e solte para criar formulários no WordPress

O WP Forms é um plugin de formulário de contato mais visual e ideal para quem trabalha com diversos campos diferentes, além dos que estão por padrão como: “nome”, “e-mail”, “assunto” e “mensagem”. 

Por possuir uma interface de arrasta e solta, é o preferido de muitos usuários e o principal concorrente do Contact Form 7

Ao invés de apenas formulários comuns, o céu é o limite para o WPForms por possibilitar criar forms de feedback, assinatura, pagamento e muito mais, tudo isso em apenas alguns minutos.

Para os usuários que precisam de mais funcionalidades, há o WPForms Pro, que conta com todos os recursos desbloqueados, como formulários de assinatura de e-mail, formulários divididos em várias páginas, upload de arquivos, lógica condicional (que transforma os forms em verdadeira programas) e muito mais.

Caso seja do interesse do usuário, há uma série de modelos pré-construídos com designs bonitos e prontos para serem utilizados.

3. Forminator – Contact Form, Payment Form & Custom Form Builder

O Forminator é um plugin de criação de formulários no WordPress que permite diversos tipos de forms como: 

  • Pedidos.
  • Widgets de feedback.
  • Enquetes interativas (com resultados em tempo real).
  • Questionários “sem resposta errada”, iguais os utilizados em sites como o Buzzfeed. 
  • Avaliadores de serviços.
  • Calculadoras (como IMC ou ingestão de calorias).
  • E até mesmo com opções de pagamento.

Também utiliza o arrastar e soltar para construção de seus campos, tornando seu uso muito fácil, servido até mesmo como principal plugin para usuários iniciantes.

4. Contact Form Plugin – Fastest Contact Form Builder Plugin for WordPress by Fluent Forms

Autodenominado o plugin de criação de formulários mais rápido do WordPress, o Contact Form Plugin é absolutamente prático e fácil de utilizar. Dentre suas principais características, há o de utilizar lógica condicional inteligente, ideal para capturar leads ou gerar verdadeiros programas em suas páginas. 

Há também como definir valores padrão nos campos, integração com ferramentas como a Slack, exportação dos dados, envio AJAX e validação do lado do cliente e do lado do servidor, para os forms.

A própria página do plugin afirma que ele é o substituto ideal para o Contact Form 7 e que seus recursos só são encontrados em plugins de nível profissional.

Qual plugin utilizar para criar um formulário de contato?

Utilizaremos o Contact Form 7, não apenas por ele ser fácil de utilizar, mas por possuir diversas integrações no próprio WordPress, o permitindo extrair o máximo de poder dos forms criados.

Entretanto, é possível utilizar outros plugins da lista, principalmente os que utilizam o recurso de arrasta e solta. Como o Contact Form 7 não trabalha dessa maneira, pode ser que os seus concorrentes sejam mais produtivos, a depender do caso. 

Como criar um formulário de contato no seu blog

1. Acesse a administração do WordPress.

2. Clique em Plugins → Adicionar Novo.

3. Pesquise por Contact Form 7 e o instale.

4. Clique no novo item de menu Contato

contato

Nele e será mostrado a tela de formulários do Contact Form 7 onde são listados todos os formulários já criados com o plugin. Por enquanto, como ele foi recém-instalado, há apenas um único formulário padrão criado, denominado de “Formulário de Contato 1”. 

tela de formulário de contato

5. Passe o mouse sobre o Formulário de Contato 1 e clique em Editar.

Com isso, será aberta a tela de edição do formulário selecionado. Ela pode parecer confusa para usuários iniciantes, mas fique tranquilo que é bem fácil de entender.

Como funcionam os campos

Criamos o diagrama abaixo para facilitar o entendimento, diremos para quê cada campo serve e como utilizá-los da melhor maneira. 

campos de preenchimento para formulário de contato no Contact Form 7
  • Nome do formulário de contato: é o que indica qual formulário de contato está sendo editado, algo útil se for trabalhar com diversos formulários diferentes.
  • Shortcode: código gerado pelo plugin que será utilizado para mostrar o formulário na página que desejar.
  • Abas de configuração: o CF7 possui 4 abas de configuração, são elas: Formulário, que criaremos os campos; Mail, onde os e-mails são configurados; Mensagens, para alterar as mensagens de erro ou avisos, se necessário; e Configurações adicionais, para a adição de recursos extras.
  • Caixas de seleção de campo: onde estão todas as opções de campo disponível. Se quiser adicionar um campo de caixas de seleção, por exemplo, basta clicar em caixas de seleção e preencher as configurações solicitadas.
  • Campos de formulário: área textual em HTML que indica quais campos estão no nosso formulário atualmente.

É comum vários usuários terem dúvida do que significa cada palavra “estranha” nos campos de formulário. Aqui vai uma pequena tradução:

  • Label: elemento em HTML que define um campo, junto com seu título ou outros elementos que o acompanham. O plugin gera isso por conta próprio, não é necessário se importar.
  • Elementos nos colchetes: estrutura que funciona através do seguinte esquema: [tipo de campo | nome do campo | opções adicionais] Na primeira linha temos, por exemplo, [text* your-name autocomplete:name], que indica haver um campo de texto obrigatório (o “*” indica obrigatoriedade de preenchimento) com a opção de autocompletar se possível. 

De forma geral, não é necessário se preocupar com essa estrutura. Ela é gerada pelo próprio plugin e serve apenas como alternativa visual dos campos em HTML. Nossa recomendação é utilizar o formulário padrão gerado pelo plugin. Ele é básico e, por isso, funciona muito bem.

Configuração do envio de e-mails 

Para garantir que seus e-mails sejam recebidos, é necessário configurar o Contact Form 7 corretamente. Normalmente, ele já vem pré-configurado. Mesmo assim, explicaremos passo a passo para evitar dúvidas ou problemas futuros.
Para isso, vá na aba “Mail” e veja as configurações padrão de cada campo. Explicaremos também para que servem cada um dos campos.

Configuração de e-mail para envio de mensagens
  • Para: e-mail que receberá as mensagens. É indicado que esse endereço de e-mail seja de dentro do servidor. Em outras palavras, que contenha o @endereçodoseusite.com.br.
  • De: como o e-mail é enviado do seu site para seu e-mail, algum endereço precisa enviar essa mensagem. Portanto, é utilizado um endereço próprio do servidor para isso. Deixe esse campo como o plugin preencheu.
  • Assunto: o assunto que indicará o e-mail na caixa de entrada. Por padrão, é mostrado o assunto digitado pelo usuário, mas é possível mudar essa opção caso queira. 
  • Cabeçalhos adicionais: esse “reply-to” indica para qual e-mail deve ser respondido a mensagem. No caso, para o e-mail de quem te enviou a mensagem. Deixe esse campo como está.
  • Corpo da mensagem: a aparência da mensagem do e-mail. Ela já vem dizendo de quem foi, o assunto e o corpo da mensagem. Caso queira personalizar, fique a vontade, mas é possível deixar esse campo como já veio.

Personalização das mensagens

Se houver a necessidade de alterar as mensagens geradas pelo Contact Form 7, ele oferece uma página exclusiva para isso na aba “Mensagens”. 

Mensagens personalizadas do formulário de contato

Basta alterar o que desejar e salvar. 

Como exibir o formulário de contato em suas páginas do WordPress

Para mostrar o formulário de contato, vá na tela de edição de uma página, como a Contato, por exemplo, e cole o shortcode do formulário. Esse shortcode é visto no campo azul abaixo do título do formulário.

shortcode do contact form 7

Ao colar o shortcode, a aparência será mais ou menos essa, a depender da sua página.

shortcode do formulário de contato inserido em página

Feito isso, visualize a página e note como o estilo do formulário de contato se adequa ao seu tema, já que ele utiliza a própria folha de estilos dele, o tornando completamente adaptável.

exemplo de form

As principais extensões do Contact Form 7

O CF7 possui diversas extensões que aumentam suas funcionalidades. Falaremos sobre as principais abaixo:

Contact Form 7 – Dynamic Text Extension

Esse plugin oferece a opção de tornar dinâmico os valores a serem preenchidos do Contact Form 7. Isso é muito útil para gerar campos pré-preenchidos com base em outros valores, que incluem:

  • Preenchimento automática da URL, ID de post, título ou slug.
  • Referência a outros conteúdos.
  • Preenchimento com informações do post, persona ou campos personalizados.
  • Identificadores exclusivos para tickets de suporte. 

O uso dele é bem mais profissional e focado em programadores, mas se seu site trabalha com suporte, utilizá-lo pode te fazer entender mais a situação com o qual seu cliente gera as solicitações de ajuda.

Drag and Drop Multiple File Upload – Contact Form 7

Uma extensão poderosa do Contact Form 7 que permite o usuário carregar vários arquivos com arrasta e solta. Com ele, é possível validar o tipo e tamanho do arquivo, definir um número limite de uploads e ter feedbacks ao usuário, como barra de progresso.

Calculation For Contact Form 7

Como o nome já indica, o Calculation For Contact Form 7 é um plugin que permite cálculos dos campos do CF7. Pode ser utilizado multiplicação, soma, subtração, divisão e fórmulas. A utilidade dele é poder gerar um formulário de orçamento, custos, hipotecas, calorias ou IMC. 

Ultimate Addons for Contact Form 7

Como novos 25 recursos adicionais e essenciais para o CF7, o Ultimate Addons for Contact Form 7 ajuda muito quando se trata de produtividade e velocidade na criação de formulários dinâmicos e interessantes.

Dentre seus diversos recursos, temos os principais, como:

  • Redirecionamento externo para página de agradecimento ao submeter o formulário.
  • Campo condicional. 
  • Controle deslizante de intervalo. 
  • Campo de classificação por estrelas. 
  • Lista de países (com bandeira).
  • Campo repetidor.
  • Salvamento no banco de dados.
  • Campos de preenchimento automático de país, cidade, estado e CEP, baseando-se na geolocalização do IP, por isso os valores podem não ser completamente exatos, mas aproximados.

Contact Form 7 Multi-step Forms

Caso seja necessário, por exemplo, ter um formulário de contato, que fosse utilizado em várias páginas e só no final os dados fossem enviados, esse plugin é perfeito para isso. O próprio programador responsável pelo projeto indica uma prévia de como seu formulário ficaria com o recurso.

Conclusão

No artigo de hoje vimos como criar um formulário de contato para seu blog. Dessa forma, é possível receber mensagens de visitantes e respondê-las isoladamente por um ambiente privativo. 

Esperamos que todo o conteúdo tratado aqui tenha sido realmente proveitoso e que seu formulário esteja em pleno funcionamento agora. Por favor, nos diga nos comentários se deu tudo ou se teve dúvida em alguma etapa do processo de criar um formulário de contato. Seu feedback é importante demais para melhorarmos o conteúdo gradativamente. 

Obrigado por ler esse material por completo. Um forte abraço! Nos vemos no próximo conteúdo.

Deixe um comentário