Pular para o conteúdo

Como instalar e configurar o plugin Contact form 7 no WordPress – PT 1/2

Paulo Felipe
Por Paulo Felipe,
Front-end na Nano Incub.
Publicado em 17 de maio de 2018

Fala galera beleza? Aqui é o Paulo Felipe trazendo mais um tutorial pra vocês. Nessa postagem você vai começar a aprender a Como instalar e configurar o plugin Contact form 7 no WordPress.

Nessa primeira parte nós vamos aprender:

  • Instalar o plugin contact form 7;
  • Criar o formulário;
  • Configurar campos do formulário;
  • Configurar o corpo do e-mail enviado pelo formulário;
  • Configurar resposta automática para o usuário,
  • Modificar mensagens de erros.

Contact form 7 é um plugin gratuito para WordPress que possibilita criar formulários de contato de uma maneira muito simples e funcional, ele conta com diversas opções que lhe permite criar campos dos mais variáveis tipos como “text”, “email”, “tel”, “menu suspenso” entre muitos outros.

O plugin  permite criar um e-mail automático (auto responder) para cada formulário, além de aceitar html, css e o framework bootstrap para customizar os seus formulários além de muitas outras funcionalidades.

Aperte o play e bons estudos!

Como instalar e configurar o plugin Contact form 7 no WordPress – Tutorial

Confira também um tutorial em texto completo para te auxiliar em Como instalar e configurar o plugin Contact form 7 no WordPress.

Instalando o plugin Contact Form 7

A primeira coisa a ser feita é instalar o plugin no seu wordpress, acesse o link de download (Baixar plugin Contact Form 7) ou se preferir acesse o menu “Plugin” em seu WordPress, clique em “Adicionar novo” e pesquise por Contact form 7, agora é só instalar e ativar o plugin.

Adicionando um novo formulário no Contact Form 7

Com o plugin instalado basta parar o mouse em cima da opção “Form contato” localizada no menu principal do WordPress e clique na opção “Adicionar novo”.

Como criar um formulário de contato no WordPress

Tela principal CF7

Bem vindo a tela principal do Contact form 7, a imagem a seguir explica um pouco sobre as opções principais do plugin.

Como criar um formulário com o Contact form 7

Como configurar campos do form no Contact Form 7

Agora que você já conhece um pouco das configurações gerais do Contact form 7, vamos definir os nomes e tipos de cada campo que irão compor o nosso formulário.

O form conterá sete campos que serão:

  • “Nome” (tipo texto);
  • “E-mail” (tipo email);
  • “Telefone” (tipo tel);
  • “Estado” (tipo menu suspenso);
  • “Foto” (tipo arquivo);
  • “Assunto” (tipo texto),
  • e “Mensagem” (tipo textarea).

Na aba “Formulário” apague todo o conteúdo do formulário padrão deixando apenas o botão de enviar [submit “enviar”].

Vamos começar criando os títulos de cada campo.

Para criar os títulos, basta um inserir um “label”  para cada campo da seguinte forma.

<label>Nome</label>

<label>E-mail</label>

<label>Telefone</label>

<label>Estado</label>

<label>Foto</label>

<label>Assunto</label>

<label>Mensagem</label>

Depois de definir os títulos é hora de definir o tipo de cada campo. Para isso basta você escolher o tipo de cada campo na lista de tipo de campos. Para deixar o tutorial mais simples, vamos configurar apenas o nome do campo e se ele será obrigatório ou não.

Lista de tipos de campos Contact Form 7
Lista de tipos de campos Contact Form 7

É muito importante definir os tipos corretos para campo pois assim o próprio plugin insere algumas validações como por exemplo se o email não conter @ ou . (ponto) quando o usuário enviar o formulário irá aparecer uma mensagem informando que o campo não foi preenchido corretamente.

Os campos nome, email, telefone, assunto e mensagem seguirão a mesma formatação. Fica a seu critério definir quais campos serão obrigatórios ou não.

Como criar um formulário com o Contact form 7

O campo Estado que será do tipo “Menu suspenso” terá a seguinte formatação:

Configurando campo de lista suspensa - contact form 7

O campo de foto terá a seguinte configuração:

Criar campo para anexar arquivo Contact form 7

 

Depois dos campos inseridos, a sua tela de configuração de formulário estará parecida com a da imagem abaixo.

*Lembrando que os campos com um asterisco * informam para o Contact form 7 que esse campo é obrigatório. Caso ele fique em branco, uma mensagem é exibida para o usuário. Para melhor identificação do usuário insira um * na frente do título de cada campo obrigatório.

A estrutura do seu form ficará assim:

<label>Nome
[text* nome]
</label>

<label>E-mail
[email* email]
</label>

<label>Telefone
[tel telefone]
</label>

<label>Estado
[select* estado "UF" "MG" "RJ" "SC" "SP"]
</label>

<label>Foto
[file foto limit:2mb filetypes:jpg|png]
</label>

<label>Assunto
[text* assunto]
</label>

<label>Mensagem
[textarea* mensagem]
</label>

[submit "Enviar"]

Finalizamos aqui a configuração dos campos do nosso formulário, agora clique em “Salvar

Configurando destinatário e corpo do e-mail enviado pelo formulário Contact form 7

Nesse momento vamos configurar o e-mail, a forma como o formulário será mostrado para o destinatário e criar um e-mail automático para ser enviado ao remetente confirmando que o e-mail foi enviado com sucesso.

Para deixar o tutorial mais real eu irei utilizar o meu e-mail para mostrar como funciona o recebimento do e-mail. Sinta-se a vontade para me enviar um e-mail caso tenha alguma dúvida, terei o maior prazer em ajudar.

A imagem abaixo mostra a função dos quatro primeiros campos de configurações do e-mail que será entregue para o destinatário.

Configurando destinatário e cordo do e-mail - Contact form 7

Agora vamos configurar o corpo do e-mail que será entregue ao destinatário. A imagem a seguir mostra um exemplo de layout:

Configurando corpo do e-mail - Contact Form 7

Agora é inserir o nome do campo que queremos anexar arquivos no e-mail no bloco “Anexo” conforme imagem abaixo:

Muito bem, o e-mail que será enviado para o destinatário já está configurado, agora é só salvar o formulário.

Vamos agora para a última ação dessa primeira parte do tutorial de Como criar um formulário com o Contact form 7

Como configurar resposta automática no Contact form 7

Chegou a hora de configurar a resposta automática que será enviada para o e-mail do usuário.

Marque a opção Mail (2)  e vamos começar a terceira etapa do tutorial.

A imagem a seguir mostra um exemplo de como configurar uma resposta automática com o Contact form 7.

Lembre-se marcar a opção “Usar tipo de conteúdo HTML

Clique em Salvar.

Caso apareça a mensagem “Este endereço de e-mail não pertence ao mesmo domínio do site“, ignore-a.

Clique na aba “Mensagens“. Nessa aba você pode substituir as mensagens que vem por padrão, por mensagens personalizadas. Não vou aprofundar nessa parte porque é bem intuitiva. Segue imagem:

Configurando mensagens Contact form 7

É isso galera, a primeira parte desse tutorial vem até aqui, na continuação desse tutorial você aprenderá:

  • Como configurar SMTP no Worpress;
  • Testar para ver se tudo está ok.

Aprenda a configurar o plugin Easy WP SMTP no WordPress na parte 2

Espero que este tutorial tenha lhe ajudado, qualquer dúvida estou à disposição.

Um Abraço.

Compartilhe esse post

Deixe o seu comentário, dúvida ou sugestão de novos tutoriais