Este é um super tutorial onde vamos aprender desde colocar um reCAPTCHA em formulários até criar um SUPER formulário com validações e retorno em AJAX usando PHPMailer. Então pega sua xícara de café e bora pro conteúdo!

versão do PHPMailer deste tutorial: 5.5

Introdução ao reCAPTCHA

Colocar reCAPTCHA do Google em Formulário PHP com retorno em AJAX

O reCAPTCHA é uma ferramenta do Google para proteger seu site contra spammers e bots. Ele vem de uma ideia novadora, pois até então os captchas eram vistos mais como um obstáculo do que um auxiliar pelos usuários. Com o reCAPTCHA isso é diferente, pois tudo que o usuário precisa fazer é clicar em um checkbox, confirmando que não é um robô. Dessa forma todos ganham, o usuário tem acesso mais rápido às informações desejadas, e você mantém visitantes indesejáveis de seu site.

Como adicionar o reCAPTCHA em meu formulário PHP com retorno AJAX

O primeiro passo é você conseguir uma chave para o seu site. Vá até o site abaixo e clique no botão azul localizado na posição superior-direita do site, escrito "My reCAPTCHA": https://www.google.com/recaptcha/intro/v3beta.html

Faça o login como pede para ter acesso a criação do seu primeiro reCAPTCHA, informe os domínios que você deseja permitir e escolha o tipo de reCAPTCHA v2 e clique em "Register".

Após ter cadastrado seu site, você terá em mãos duas informações importantes: o site key e o secret key. O primeiro passo para implementar o reCAPTCHA em seu site é inserir a API em seu site. Insira o código dentro da tag head de seu site:

<script src='https://www.google.com/recaptcha/api.js?hl=pt-BR'></script>

Tudo pronto para o próximo passo.

Organizando os arquivos

Bom, separei tudo em 7 arquivos e cada um tem as respectivas funções:

  • _config.php => Responsável para definirmos as configurações do reCAPTCHA e Servidor de e-mail
  • _form.js => Manipula eventos do formulário e Ajax
  • _form.ajax.php => Coração do nosso formulário, esse cara é responsável pelo formulário funcionar
  • _form.css => Na web ter estilo é indispensável, e claro que vamos dar aquela estilizada em nosso formulário
  • index.php => Exibição do formulário na página
  • obrigado.php => Exibe mensagem de sucesso ao enviar formulário (Ideal para métricas)
  • .htaccess => Manupula acesso ao projeto

Também criamos a pasta Library onde ficará a biblioteca PHPMailer para dispararmos os e-mails.

Construindo o Formulário

Nosso formulário completo ficou da seguinte forma.

.htacess

RewriteEngine On
Options All -Indexes

#URL Rewrite
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^(.*)$ index.php?url=$1

 

_config.php

<?php
/* 
 Created on : 20/06/2018, 18:28:36
 Author : Ebrahim | Web Creative www.webcreative.com.br
*/

//Definindo Website
define("SITE", "https://localhost/form_recaptcha"); //Informe a URL do seu projeto

//Definindo Configurações do Servidor de E-mail
define("WC_MAIL_HOST", ""); //URL do host SMTP
define("WC_MAIL_PORT", ""); //Porta de saída do servidor de e-mail
define("WC_MAIL_USER", ""); //Email: Resposável por enviar e receber contatos
define("WC_MAIL_PASS", ""); //Senha do e-mail
define("WC_MAIL_SENDER", ""); //Nome da sua empresa

//Definindo Site key e secret key fornecido pelo Google
define("reCAPTCHA_SITEKEY", ""); //Site key
define("reCAPTCHA_SECRETKEY", ""); //Secret key

 As defines reCAPTCHA_SITEKEY e reCAPTCHA_SECRETKEY são as chaves que você pegou no primeiro passo do tutorial.

index.php

<?php
//CHAMA DEFINIÇÕES
require '_config.php';
?>
<!DOCTYPE html>
<html lang="pt-br" >
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=0">
 <title>reCAPTCHA em Formulário | Web Creative</title>
 
 <link rel="base" href="<?= SITE; ?>"/>
<!-- DEFINE ESTILO DA PÁGINA -->
 <link rel="stylesheet" href="_form.css">

<!-- RECAPTCHA API -->
 <script src='https://www.google.com/recaptcha/api.js?hl=pt-BR'></script>
 </head>
 <body>
 <div class="wrapper">
 <div class="form_erro"></div>
 <form name="contactForm" class="form-contact" action="" method="post" enctype="">
 <h1>Formulário de Contato com reCAPTCHA</h1>
 <label>
 <legend>Seu nome</legend>
 <input type="text" name="nome" placeholder="Ebrahim" required="required"/>
 </label>
 <label>
 <legend>E-mail</legend>
 <input type="text" name="email" placeholder="[email protected]" required="required"/>
 </label>
 <label>
 <legend>Assunto</legend>
 <input type="text" name="assunto" placeholder="Motivo do contato" required="required"/>
 </label>
 <label>
 <legend>Mensagem</legend>
 <textarea name="mensagem" rows="10" placeholder="Escreva aqui sua mensagem" required="required"></textarea>
 </label>
 <div class="g-recaptcha" data-sitekey="<?= reCAPTCHA_SITEKEY; ?>"></div>
 <button>Enviar contato</button>
 </form>
 </div>
 <!-- SCRIPT JS -->
 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 <script src="_form.js"></script>
 </body>
</html>

O name "contactForm" do formulário ficará responsável para chamar o JS que enviar as informações para o AJAX.

_form.css

/* 
 Created on : 20/06/2018, 18:28:36
 Author : Ebrahim | Web Creative www.webcreative.com.br
*/
body{
 font-family: Arial, sans-serif;
 font-size: 16px;
 background: #2d3755; /* defino cor do fundo do documento */
 color: #fff;
}
.wrapper{
 max-width: 90%;
 width: 1140px;
 margin: 0 auto;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
 position: relative;
 flex-wrap: wrap;
}
.form_erro{
 width: 60%;
 background: #f48720;
 display: none;
}
.form_erro p{
 padding: 0 10px;
}
.form-contact{
 width: 60%;
 position: relative;
 border-radius: 3px;
}
.form-contact label{
 margin-bottom: 20px;
 display: block;
 width: 100%;
 position: relative;
}
.form-contact input,
.form-contact textarea{
 position: relative;
 padding: 10px;
 border: 1px solid #ccc;
 border-radius: 3px;
 width: 96%;
 outline: 0;
 font-size: 16px;
 display: block;
}
.form-contact label legend{
 text-transform: uppercase;
 font-size: 14px;
 margin-bottom: 5px;
 opacity: 0.6;
 letter-spacing: 1px;
}
.form-contact .g-recaptcha{
 margin-bottom: 20px;
}
.form-contact button{
 padding: 15px;
 width: 100%;
 background: #dc872f;
 border: 0;
 color: #fff;
 font-size: 22px;
 text-transform: uppercase;
 letter-spacing: 1px;
 display: block;
 cursor: pointer;
 border-radius: 3px;
}
.form-contact button:hover{
 background: #f48720;
}
/*BASE::LOAD*/
.wc_load{position: fixed; display: none; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); text-align: center; color: #fff; z-index: 9999;}
.wc_load_content{display: inline-block; margin: auto;}
.wc_load_content_msg{ font-size: 0.8em; font-weight: 500; text-transform: uppercase; text-shadow: 1px 1px #000; margin-top: 15px;}

_form.js

/* 
 Created on : 20/06/2018, 18:28:36
 Author : Ebrahim | Web Creative www.webcreative.com.br
 */
SITE = $("link[rel='base']").attr("href");

$(function () {

 $("body").on("submit", "form[name='contactForm']", function (e) {

 var recaptchaForm = $(this);

 e.preventDefault();
 e.stopPropagation();

 iniciaLoad(); //ABRE LOAD
 var FormData = "callback_action=contactForm&" + $(this).serialize();
 $.post(SITE + '/_form.ajax.php', FormData, function (data) {

 //TRATA ERRO
 if (data.form_erro) {
 $('.form_erro').html(data.form_erro).fadeIn();
 } else {
 $('form_erro').fadeOut();
 }
 
 //REDIRECIONA SE TUDO OK
 if (data.redirecionar) {
 window.location.href = data.redirecionar;
 }

 $('.wc_load').remove();
 }, 'json');
 });

 //INICIA LOAD AO SUBMETER
 function iniciaLoad() {
 if (!$('.jwc_load').length) {
 $("body").append('<div class="wc_load jwc_load"><div class="wc_load_content"><img src="' + SITE + '/images/load_w.svg"/><p class="wc_load_content_msg">Aguarde, enviando solicitação!</p></div></div>');
 $('.jwc_load').fadeIn().css('display', 'flex');
 }
 }
});

_form.ajax.php

<?php

/*
 Created on : 20/06/2018, 18:28:36
 Author : Ebrahim | Web Creative www.webcreative.com.br
 */

$getForm = filter_input_array(INPUT_POST, FILTER_DEFAULT);

if (empty($getForm) || empty($getForm['callback_action'])):
 die('Acesso Negado!');
endif;

$strPost = array_map('strip_tags', $getForm);
$POST = array_map('trim', $getForm);


$Callback = $POST['callback_action'];
$jSON = null;
unset($POST['callback_action']);

usleep(2000);

//CHAMA DEFINIÇÕES
require '_config.php';

switch ($Callback):
 case "contactForm":

 //Defino a Chave do meu site
 $SecretKey = reCAPTCHA_SECRETKEY;

 //Pego a validação do Captcha feita pelo usuário
 if (isset($POST['g-recaptcha-response'])):
 $ValidaCaptcha = $POST['g-recaptcha-response'];
 endif;

 // Verifico se foi feita a postagem do Captcha 
 if (isset($ValidaCaptcha)):

 // Valido se a ação do usuário foi correta junto ao google
 $RetornaCaptcha = json_decode(file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=' . $SecretKey . '&response=' . $POST['g-recaptcha-response']));

 // Se a ação do usuário foi correta executo o restante do meu formulário
 if ($RetornaCaptcha->success):
 if (!filter_var($POST['email'], FILTER_VALIDATE_EMAIL)):
 $jSON['form_erro'] = "<p>E-mail inválido. Favor informar um e-mail válido!</p>";
 else:
 require_once("Library/PHPMailer/src/PHPMailer.php");
 require_once("Library/PHPMailer/src/SMTP.php");

 // Inicia a classe PHPMailer
 $Mail = new \PHPMailer\PHPMailer\PHPMailer;

 $Mail->IsSMTP(); // Define que a mensagem será SMTP

 try {
 $Mail->CharSet = "UTF-8";
 $Mail->Host = WC_MAIL_HOST;
 $Mail->SMTPAuth = true; // Usar autenticação SMTP
 $Mail->Port = WC_MAIL_PORT;
 $Mail->Username = WC_MAIL_USER;
 $Mail->Password = WC_MAIL_PASS;
 //Define o remetente 
 $Mail->SetFrom($POST['email'], $POST['nome']);
 $Mail->AddReplyTo($POST['email'], $POST['nome']);
 $Mail->Subject = $POST['assunto']; //Assunto do e-mail
 //Define os destinatário(s)
 $Mail->AddAddress(WC_MAIL_USER, WC_MAIL_SENDER);

 //Campos abaixo são opcionais 
 //$Mail->AddCC('[email protected]', 'Destinatario'); // Copia
 //$Mail->AddBCC('[email protected]', 'Destinatario2`'); // Cópia Oculta
 //$Mail->AddAttachment('images/phpmailer.gif'); // Adicionar um anexo
 //Define o corpo do email
 $Mail->MsgHTML($POST['mensagem']);

 ////Caso queira colocar o conteudo de um arquivo utilize o método abaixo ao invés da mensagem no corpo do e-mail.
 //$Mail->MsgHTML(file_get_contents('arquivo.html'));

 $Mail->Send();
 $jSON['redirecionar'] = SITE . "/obrigado.php";

 //caso apresente algum erro é apresentado abaixo com essa exceção.
 } catch (phpmailerException $e) {
 $jSON['form_erro'] = "<p>" . $e->errorMessage() . "</p>"; //Mensagem de erro costumizada do PHPMailer
 }
 endif;
 else:
 $jSON['form_erro'] = '<p>Por favor faça a verificação do captcha!</p>';
 endif;
 endif;
 break;
endswitch;

if ($jSON):
 echo json_encode($jSON);
endif;

Como dito, esse é o cara responsável por todos os retornos e envio do formulário, deixei tudo comentado as validações feitas nele para que você possa pegar a lógica e aplicar em outros formulários que quiser implementar.

Esses são os arquivos principais para que tudo funcione. Bem simples né?

Agora você pode baixar o arquivo completo deste tutorial já com imagens de LOAD e a biblioteca PHPMailer incluídas.

DOWNLOAD DO FORMULÁRIO COMPLETO

Se ficou com alguma dúvida, crítica construtiva ou até mesmo um elogio =D, não deixe de comentar abaixo.