Fale Conosco (15) 99683-8272

Materiais educativos Login do aluno

Menu principal

Navegue pela agência

Últimas novidades

Está rolando por aqui

Onde nos encontrar?

Rua Lucas de Camargo, 257, Centro
Itapeva - SP 18400-340

WhatsApp: (15) 9 9683-8272

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

Aprenda o método passo a passo para colocar o captcha "não sou robô" do Google em formulários PHP com retorno em AJAX. Válido para qualquer tipo de formulário que você deseje implementar.
Colocar reCAPTCHA do Google em Formulário PHP com retorno em AJAX

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="exemplo@gmail.com" 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('destinarario@dominio.com.br', 'Destinatario'); // Copia
//$Mail->AddBCC('destinatario_oculto@dominio.com.br', '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.

Deixe um comentário

Enviando Comentário Fechar

| Informe seu e-mail abaixo para continuar!