How to integrate Google reCAPTCHA for your form with validation

In this post, I would like to explain about how to integrate Google reCAPTCHA for your form with validation. For that, we need to register our domain to Google. Please go to below URL to integrate it. Then we will get the site key.

How to integrate Google reCAPTCHA for your form with validation - Anil Labs - an Anil Kumar Panigrahi's Tech Blog

How to integrate Google reCAPTCHA for your form with validation – Anil Labs – an Anil Kumar Panigrahi’s Tech Blog


https://www.google.com/recaptcha/admin#list
Initial Screen on how to integrate Google reCAPTCHA for your form with validation – Anil Labs – an Anil Kumar Panigrahi’s Tech Blog

Initial Screen on how to integrate Google reCAPTCHA for your form with validation – Anil Labs – an Anil Kumar Panigrahi’s Tech Blog


once you provide the domain names, we will get sitekey like below
Steps screen on how to integrate Google reCAPTCHA for your form with validation – Anil Labs – an Anil Kumar Panigrahi’s Tech Blog

Steps screen on how to integrate Google reCAPTCHA for your form with validation – Anil Labs – an Anil Kumar Panigrahi’s Tech Blog


There are two steps integrations.

1. Client side integration

Paste the below URL before end of head tag

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

Paste it end of your form then reCAPTCHA will be appear.

<div class="g-recaptcha" data-sitekey="123456"></div>

2. Server side integration

Based on the SiteKey we can integrate.

Complete HTML Form with reCAPTCHA code and validation:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>How to integrate Google reCAPTCHA for your form with validation</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <script src='https://www.google.com/recaptcha/api.js'></script>
        <style>
            form{width:500px;}
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div class="container">
            <fieldset><legend>integrate Google reCAPTCHA</legend></fieldset>
            <form name="google_reCAPTCHA_validate" method="post" id="google_reCAPTCHA_validate" >
                <div class="form-group row">
                    <label for="username-text-input" class="col-2 col-form-label">UserName</label>
                    <div class="col-10">
                        <input class="form-control" type="text" value="" id="username-text-input">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="password-text-input" class="col-2 col-form-label">Password</label>
                    <div class="col-10">
                        <input class="form-control" type="password" value="" id="password-text-input">
                    </div>
                </div>
                   
                <div class="form-group row text-left">
                    <div class="col-12">
                        <div class="g-recaptcha" data-sitekey="123456"></div>
                        <p style="color:#F00" id="recaptchaerr"></p>
                    </div>
                </div>
                <div class="form-group row text-left">
                    <div class="col-12">
                       <button type="submit" class="btn btn-primary">Log In</button>
                    </div>
                </div>    
               
        </form>
        </div>
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>  
    <script>
    $('#google_reCAPTCHA_validate').on('submit', function(e) {
        if(grecaptcha.getResponse() == "") {
            e.preventDefault();
           
            $("#recaptchaerr").html('Please select captcha');
           
        } else {
            $("#recaptchaerr").html('');
        }
    });
    </script>  
    </body>
</html>

Note: Replace ‘123456’ with your SiteKey.

Anil Kumar Panigrahi

With more than 10 years experience in PHP and Founder of Anil Labs, a blog for PHP and related posts. contributed posts regarding CodeIgniter, CakePHP and Learn PHP online

Contact : [email protected]

You may also like...

Leave a Reply

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