How to Validate Google ReCaptcha on Submisssion of form

How-to-Validate-Google-ReCaptcha-on-Submisssion-of-form

How to Validate Google ReCaptcha on Submisssion of form

In this tutorial, you learn How to Validate Google ReCaptcha on Submisssion of form.

There are few Steps for validating google captcha :-

  1. Create a HTML form with Input Fields and Submit Button With POST method .
  2. Design the Form With CSS ( Cascading Style Sheets )
  3. Go to Google reCaptcha Webpage and Get reCaptcha api.js Link .
  4. Copy the snippet where the reCAPTCHA widget to appear .
  5. Copy the Site Key and Secret key After Login for recaptcha .
  6. Final Step is to make a PHP Code for Validating reCaptcha

Step 1 : Create a Form in HTML and save it a .html extension or the extension you want to save.

<!DOCTYPE html>
<html>
<head>
<title></title>

	<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>

<form action="verify.php" method="post">

<input type="text" name="name" placeholder="Name">

<input  type="email" name="email" placeholder="Email">

<input  type="telephone" name="phone" placeholder="Ph.no">

<textarea  name="query" placeholder="Query"></textarea>

<div class="g-recaptcha" data-sitekey="here is your site key" ></div>

<input type="submit" name="submit" value="Submit">

</form>

</body>
</html>

 

The snippet <script src='https://www.google.com/recaptcha/api.js'></script> is to link with the google reCaptcha .

Place this Snippet between <head><script src='https://www.google.com/recaptcha/api.js'></script> </head>

Now <form> tag is used to make a form in html and define method='post'

<input type='text' /> is used to take input from user.

<input type = 'submit' /> is used to make a submit button in simple html 

Step 2 : Copy the snippet for reCAPTCHA widget to appear with Sitekey  

<div class="g-recaptcha" data-sitekey="PASTE HERE YOUR SITE KEY"></div>

Place this Code where reCAPTCHA widget you want to appear .

Step 3 : Create a File in PHP and save it as verify.php .

This file is used to validate the reCaptcha Form.

Go to the HTML FORM and write Form action='verify.php'

<form action="verify.php" method="post">

The Action in form is used to make a process after filling the form within the page or to another page.

Step 4 : Write the Following Code in verify.php file to validate the form .

 <?php

// when form is submitted
if(isset($_POST['submit']) && !empty($_POST['submit'])){ 
// check do we have recaptcha param added to form and submited
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){ 
//your site secret recaptcha key
$secret = 'Your Secret Key';
//get verify response data
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
$responseData = json_decode($verifyResponse);
// check was the response successfully checked by Google
 if($responseData->success){
 // if recaptcha check was success
 // include phpmailer class
   
 ///////// Your code here ///////////
}
 }else{
 // if recaptcha is not checked
 $errMsg = 'Please click on the reCAPTCHA box.';
 } 
} 
// set language for recaptcha
$lang = 'en';
?> 

The isset($_POST['submit']) is used to check wheather the Submit button with name='submit' is clicked , then run the following code .

Copy the Secret Key From the Google Recaptcha Websitesite .

 $secret = 'Your Secret Key';

Paste Your Secret Key Here.

 

Then Check Wheather the Site Key And Secret key is Right and Execute the Statement 

if($responseData->success){

//Form Execution Code

 

}

Note : Google recaptcha Sitekey and Secret is Different for LOCALHOST and Every WEBSITE

Enjoy .

If You Have any Problem Regarding Google ReCaptcha and Execution .. Comment Below .

 

Thanks .

Stay Connected.

ADD COMMENT

Your email address will not be published. Required fields are marked *







Cris lj
15/01/2018

Nice work man

Admin
15/01/2018

Thanks cris

The primary motive of our company is to provide beyond satisfactory results .

Request a free consultation quote

WWW.BHAGAUTI.COM © COPYRIGHT 2018 | TERMS AND CONDITIONS | Privacy & Policy