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
17 comentários
6,364
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
Já temos 17 comentários
Alexandre Batista

Alexandre Batista

17 de setembro de 2019 às 20:24

Olha eu de novo aqui rs
Quando fiz o teste local, ví que funcionou depois quando tentei implementar no site deu erro, as informações da pasta config.php estão corretas, da mesma forma as chamadas no index.php. Deixei os campos com o mesmo nome apenas para ver se ia. O site é "intercleanltda.com.br". Ao inspecionar o elemento, na aba console aparece 2 erros. Se for algo fácil, saberia dizer o que seria?
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

17 de setembro de 2019 às 21:53

Opa Alexandre,


Pelo que simulei no seu site, o ajax retorna um erro de allow_url_fopen, verifique de ativar essa opção no php.ini do seu servidor.

Enviando Comentário Fechar
Victor Alencar

Victor Alencar

29 de agosto de 2019 às 11:03

Bom dia , fiz o download , estou rodando no 000webhost.com , porem quando eu clico em enviar , ele fica no"AGUARDE, ENVIANDO SOLICITAÇÃO!"
, não conseguir resolver , poderia me ajudar .
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

29 de agosto de 2019 às 12:13

Opa Victor, tudo bem?

Certifique se você inseriu a url do site dentro do arquivo config.php.
Enviando Comentário Fechar
Davi Firmino

Davi Firmino

14 de agosto de 2019 às 16:43

Aparece esses erros :/
Access to XMLHttpRequest at 'http://www.partiuveg.com/form_recaptcha/_form.ajax.php' from origin 'http://partiuveg.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
jquery-3.3.1.min.js:2 POST http://www.partiuveg.com/form_recaptcha/_form.ajax.php net::ERR_FAILED
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

14 de agosto de 2019 às 19:19

Olá Davi,

Acabei de testar no seu site e tudo ocorreu bem. Conseguiu resolver?
Enviando Comentário Fechar
Davi Firmino

Davi Firmino

14 de agosto de 2019 às 19:29

Muito obrigado pela atenção!
Agora que vi que os e-mails estão chegando, mas pra mim, não sai da tela "AGUARDE, ENVIANDO SOLICITAÇÃO"
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

14 de agosto de 2019 às 19:30

Certamente é algum tipo de bloqueio do seu navegador. Aqui foi para a página obrigado.php ao enviar.
Enviando Comentário Fechar
Davi Firmino

Davi Firmino

14 de agosto de 2019 às 19:54

Muito obrigado pela ajuda. Vou verificar em outro pc
Enviando Comentário Fechar
Davi Firmino

Davi Firmino

14 de agosto de 2019 às 11:02

Ótimo artigo! Mas no meu teste não sai do "AGUARDE, ENVIANDO SOLICITAÇÃO!" Tô tentando achar o que fiz de errado.
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

14 de agosto de 2019 às 12:58

Obrigado Davi! Oque você pode fazer para descobrir é inspecionar elemento e ir na aba Networking, lá vai exibir o que está retornando de errado.
Enviando Comentário Fechar
Alexandre Batista

Alexandre Batista

23 de agosto de 2019 às 15:29

O meu estava acontecendo algo parecido, acredito que ele não tenha inserido a url do site dentro do arquivo config.php.
Me ajudou muito o seu artigo, muito obrigado e parabéns.
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

23 de agosto de 2019 às 15:32

Legal Alexandre, fico feliz em ter ajudado!
Enviando Comentário Fechar
Andre Dorneles

Andre Dorneles

12 de julho de 2019 às 10:41

Fui pesquisar por Recaptcha com PHP, me deparo com este belo e artigo, e me surpreendo por usar WC! Muito bom! Keep coding
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

13 de julho de 2019 às 05:43

Obrigado André!

Enviando Comentário Fechar
Claudecir Moura

Claudecir Moura

3 de junho de 2019 às 23:00

Show de bola cara. Ainda mais que já veio com a estrutura WC kkk. Brigadão.
Enviando Comentário Fechar
Ebrahim P. Leite

Ebrahim P. Leite

4 de junho de 2019 às 10:22

Fico feliz em ter ajudado Claudecir =)

Enviando Comentário Fechar