Minhas Compras
Você adicionou a sua lista de compras. O que deseja fazer agora?
Continuar Comprando! Fechar Compra!
Fale Conosco
Down Arrow

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.

24 de junho de 2018 às 22:11
3,627
Colocar reCAPTCHA do Google em Formulário PHP com retorno em AJAX
  • Compartilhe esse Post
  • Compartilhar no Facebook00
  • Compartilhar no Twitter
  • Compartilhar no WhatsApp

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.

  • Compartilhe esse Post
  • Compartilhar no Facebook00
  • Compartilhar no Twitter
  • Compartilhar no WhatsApp
Lista VIP
Sobre o autor
Comentários

Deixe um comentário

Enviando Comentário Fechar