hometrix

Integrating Google reCAPTCHA into your website

a step by step process

Google's reCAPTCHA is one of the best spam busters out there but the instructions for integration it into a website is not very clear. The following is a simplified step by step set of instructions on how to do so. The goal is to provide a a set of instructions, that if followed exactly, will result in a working version of reCAPTCHA.

Get a reCAPTCHA account

1

Log into your Google account. To get one, signup up for a gmail account at http://gmail.com.


2

Go to the Google reCAPTCHA site at https://www.google.com/recaptcha


3

Click on the Get reCAPTCHA link in the top right hand corner.

Register for a site key and a private key

Provide a label (a name) for easy recognition, useful if you'll have multiple keys.

Enter the domain names of the sites that will be using the key. This is important step to allow Google to confirm the site communicating with it is the one you intended.

Save your changes


Copy and insert the reCAPTCHA code snippets

4

At this point Google would have created two keys; a site key and a private key.

Copy the site key. It is the one you will integrate into your webpage.

The following snippet goes before the closing </head> tag on your web page, or between the closing body and html elements - </body> paste here </html> - of the webpage:
<script src='https://www.google.com/recaptcha/api.js'>

Paste the following snippet at the end of the <form> where you want the reCAPTCHA widget to appear:
<div class="g-recaptcha" data-sitekey="site-key" data-callback="onSuccess">>/div>
Note:

    1. paste the site-key in the code snippet
    2. we added the data-callback which will be used to execute a function that checks the response from google after the user validates if they are a human and not a robot.

    Results in this:

    Process Google's response

    5

    Add an onsubmit statement to your form to call a function that will be used to confirm Google's response when the user validates they are not a robot. For example:

    <form action="mail.php" method="post" id="contact_form" onsubmit="return validate();">
    Note: the onsubmit="return validate()" - the return is required for the form to process the response returned from the validate() function


    6

    Add the following code to the bottom of your web page, just above the closing </html> tag.

    We have provided two versions of the code; one without comments for easier copying and the other with comments explaining what is happening at the key points.


    Code without Comments

    <script src='https://www.google.com/recaptcha/api.js'></script>
    <script>
    var success = 0;
    var onSuccess = function(response) {
    success=1;
    }
    function validate() {
    if(success==1){
    success=0;
    return true;
    }
    else{
    success=0;
    document.getElementById("msg").innerHTML = "Error: Invalid Submission";
    return false;
    }
    }
    </script>

    Code with Comments

    <script src='https://www.google.com/recaptcha/api.js'></script> this is the code snippet from step 4
    <script>
    var success = 0;will use as a toggle switch
    var onSuccess = function(response) {check google response
    success=1;
    }
    responded, so turn on switch
    function validate() {reCaptcha was clicked
    if(success==1){if toggle switch is on
    success=0;
    return true;
    }
    reset toggle and process form (return true)
    else{
    success=0;
    alert("Error: Invalid Submission");
    return false;
    }
    the toggle is off, so display an error, do not process form (return false), reset switch to be safe
    }
    </script>