PHP

(PHP) Tutorial How to implement simple Google reCAPTCHA on your form

Google reCHAPTCHA

Google reCHAPTCHA

Screenshot :

 

google recaptcha demo

google recaptcha demo

 

Required and Included on this source :

  1. Bootstrap.css (just for styling)

 

Register reCAPTCHA from Google

open google reCAPTCHA admin page to register a new site
https://www.google.com/recaptcha/admin

 

Google reCAPTCHA register

Google reCAPTCHA register

 

Register your site, choose the type of reCAPTCHA V2.

Enter your domain list that using this reCAPTCHA, you can add more than 1 domain here.

Then Click Register.

google recaptcha key

google reCAPTCHA Site key and Secret key

 

After that. You will get Site key and Secret Key. Site Key is for client side. Secret Key is for server side



google recaptcha step

google recaptcha step from google reCAPTCHA official site.

 

Source Code

index.php (client side)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Google reCAPTCHA demo</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
    <h1>Google reCAPTCHA demo</h1>
    <br>
    <br>
    <div class="container">
        <form class="form-horizontal" method="post" action="submit.php">
            <div class="form-group">
                <label for="name" class="col-sm-2 control-label">Name</label>
                <div class="col-sm-3">
                    <input type="text" name="name" class="form-control" id="name" placeholder="Name" >
                </div>
            </div>
            <div class="form-group">
                <label for="address" class="col-sm-2 control-label">Address</label>
                <div class="col-sm-3">
                    <textarea name="address" id="address" placeholder="Address" class="form-control" rows="3"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-3">
                    <input type="email" name="email" class="form-control" id="email" placeholder="Email">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label"></label>
                <div class="col-sm-3">
                    <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label"></label>
                <div class="col-sm-3">
                    <button type="submit" name="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

 

submit.php (server side)

<?php
if(! isset($_POST['submit']) ) exit('You dont have any submitted data');

if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response']))
{
     //your site secret key
    $secret = 'YOUR_SECRET_KEY';
    //get verify response data
    $verify = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
    $response = json_decode($verify);
    if($response->success)
    {
        echo 'Verification Success <br>';
        echo 'Your submitted form : <br>';
        echo 'Name : '.$_POST['name'].'<br>';
        echo 'Address : '.$_POST['address'].'<br>';
        echo 'Email : '.$_POST['email'].'<br>';
        echo 'Thanks You!';


    }
    else
    {
        exit('Google reCAPTCHA verification failed. please try again');
    }
}
else
{
    exit('Please check recaptcha box');
}

 

nb: replace YOUR_SITE_KEY and YOUR_SECRET_KEY with your own key.

Demo :

Preview Demo

Download Full Source Code :
Download




Related Articles