Pular para o conteúdo

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

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

Fala galera beleza? Aqui é o Paulo Felipe trazendo mais um tutorial pra você. Nessa postagem nós iremos finalizar o tutorial de Como instalar e configurar o plugin Contact form 7 no WordPress.

Nesse tutorial você aprenderá:

Depois de fazer todas as configurações necessárias no formulário de contato, é necessário fazer a configuração de SMTP do e-mail para que quando o usuário preencher o formulário e enviar, as informações cheguem corretamente e com segurança em seu e-mail. Esse é o processo que vamos aprender nesse tutorial.

Eu usarei nesse vídeo o SMTP do gmail, caso você queira configurar outro servidor de e-mail basta pegar as configurações de SMTP desejadas na internet ...

Pegue o seu café, coloque uma música da sua preferência, tome uma respiração profunda e vamos ao processo.

Como instalar o plugin Easy WP SMTP no WordPress

Para complementar o seu aprendizado, segue um tutorial completo que preparei exclusivamente pra você

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

Plugin instalado? Então vamos continuar...

Como configurar SMTP de e-mail no WordPress

Pare o mouse na opção "Configurações" no menu principal do WordPress e clique em Easy WP SMTP

O painel principal do plugin será exibido, vamos inserir as configurações de smtp. (Farei a configuração para e-mails GMAIL)

** Eu aconselho você a ter um e-mail no gmail somente para configurar o SMTP, pois nas configurações do contact form 7 você pode colocar o e-mail que irá receber os contatos, e tendo o smtp configurado no Gmail você pode mudar de hospedagem que tudo irá continuar funcionando perfeitamente, sem contar a segurança que o Gmail nos oferece.

A primeira Aba que vamos configurar é a "SMTP Settings"

Eu vou mostrar como configurar os principais campos dessa Aba, vou deixar alguns campos em branco porém eles estão sendo configurados lá no contact form 7 conforme você pode conferir no primeiro vídeo dessa série Como instalar e configurar o Contact form 7 – PT 1/2

Segue quais campos campos serão preenchidos e como preencher:

From Email Address - [email protected]

SMTP Host - smtp.gmail.com

Type of Encryption - SSL

SMTP Port - 465

SMTP Authentication - Yes

SMTP Username - [email protected]

SMTP Password - senhadoemail

Na imagem abaixo eu vou mostrar como ficou os campos que eu preenchi:

Agora é só clicar em "Salvar".

Se o seu site tem HTTPS você pode pular o próximo passo

Para sites sem HTTPS e que estão no Localhost é necessário ir até a aba "Additional Settings" e habilitar a opção "Allow Insecure SSL Certificates" assim você permite que sites sem HTTPS possam acessar suas informações de e-mail.

Clique em "Salvar".

Testar SMTP com Easy WP SMTP

Depois de tudo configurado é hora de testar as configurações para ver se tudo correu como deveria, agora é hora de acessarmos a aba "Test Email", preencha as informações conforme é pedido:

To: Insira um e-mail diferente dos utilizados até agora para que seja enviado um e-mail de teste de SMTP.

Subject: Um assunto teste

Message: Uma mensagem de teste.

[ATENÇÃO] - Se vocês estiver usando um e-mail do gmail siga os 2 próximos passos

Para os formulários serem enviados corretamente, é necessário dar alguns acessos no gmail :

1 - Acesse a conta do gmail na qual você está configurando como usuário de SMTP e clique no seguinte link

https://www.google.com/settings/security/lesssecureapps

Agora ative a permissão para aplicativos menos seguros

2 - Agora acesse o seguinte link para permitir o acesso via SMTP para essa conta

https://accounts.google.com/b/0/DisplayUnlockCaptcha

Clique em "Continuar".

Agora que você já permitiu os acessos é só voltar na tela do WordPress e clicar em "Send Test Email"

Agora é só acessar o e-mail inserido para receber o teste e ver se chegou:

MARAVILHA! Nosso e-mail está corretamente configurado.

Inserir formulário criado no Contact Form 7 em uma página

Acesse o menu "Contatos" para ver os formulários criados no Contact Form 7 e na lista você consegue ver um campo chamado "Shortcode", copie o shortcode do formulário desejado

Agora é só acessar a página que você desejar e inserir esse shortcode

Salve as alterações da página e agora é só acessar, ver como ficou e enviar um contato pela página para confirmar que tudo está ok!

E-mail visto por quem recebe os contatos do site
Resposta automática para o usuário que enviou o contato

Resultado final

Confira abaixo como o e-mail chegou em meu teste:

E-mail visto por quem recebe os contatos do site
Resposta automática para o usuário que enviou o contato

É isso ai Incuber, tudo que é bom dura pouco, aqui finalizamos o processo completo de como deixar o seu formulário de contato com Contact Form 7 funcionando perfeitamente com SMTP configurado e tudo mais...

Curtiu? Te ajudou? Então faça a sua parte pra ajudar o Canal/Blog crescer cada vez mais:

  • Vá até o canal e Larga o Like nessa P#&%@
  • Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar nos comentários;
  • Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;
  • Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Quer aprender mais sobre Contact Form 7?

Veja outros tutoriais sobre o assunto:
Como instalar e configurar o Contact form 7 – PT 1/2
Como instalar e configurar o Contact form 7 – PT 2/2 – Configurando SMTP
Salvar contatos enviados pelo Contact form 7
Como inserir Google reCAPTCHA no Contact Form 7
Criar redirecionamento de página no Contact Form 7 após envio
Escolher destinatário com base na opção do select Contact Form 7
Inserir e Editar Placeholder no Contact Form 7
Como deixar Contact Form 7 em duas colunas

Um abraço e até o próximo post!

Compartilhe esse post

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