Integrate Google Invisible reCAPTCHA with PHP

Adding captcha on the website forms is necessary nowadays. Else, your inbox and database fill up with tons of spams. It just wastes our time in cleaning up emails and also occupies extra space in the server database.

Google reCAPTCHA is a better way for protecting your forms against the bots. Using reCAPTCHA, you will proceed with your forms only if it has real human interactions.

In this article, we study how to integrate Google Invisible reCAPTCHA on your website forms with PHP. In the case of Invisible reCAPTCHA, your visitors do not need to solve puzzles. It needs to validate the request in the background on the server-side.

Register the Site and Get API Keys

For getting started, register your site here – https://www.google.com/recaptcha/admin.

Pick up an option ‘Invisible reCAPTCHA badge’ from ‘reCAPTCHA v2’.

invisible-recpatcha

Add your domain in the same form. You can insert as many domains as you want. For a local server adds the domain as localhost. Upon submitting a form, you will get the API keys. Copy these keys. It will be required in the next steps.

recpatcha-keys

Integrate Google Invisible reCAPTCHA

In order to add an Invisible reCAPTCHA in the form requires a little bit of a different approach. We have to pass data attributes to the button and submit the form using JavaScript as follows.

<form method="post" id="userForm">
    <p><input type="text" class="form-control" name="fullname" placeholder="Enter full name" /></p>
    <p><button class="g-recaptcha btn btn-primary" data-sitekey="YOUR_SITE_KEY" data-callback="submitForm">Submit</button></p>
</form>

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function submitForm() {
    document.getElementById('userForm').submit();
}
</script>

This code adds Invisible reCAPTCHA in your form. If you reload the page, you will see the reCAPTCHA logo on the bottom-right corner of the page.

Here, we have passed the reCAPTCHA site key to the ‘data-sitekey’ attribute and the method name ‘submitForm’ to the ‘data-callback’ attribute. When the user clicks the button, it calls the callback method which submits a form using JavaScript.

Now, it’s time for server-side validation. We will verify the value of the reCAPTCHA response against the Google API URL as follows.

if (isset($_POST['g-recaptcha-response'])) {
    $secret_key = 'YOUR_SECRET_KEY';
    $url = 'https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key.'&response='.$_POST['g-recaptcha-response'];
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_HEADER, false);
    $data = curl_exec($curl);
    curl_close($curl);
    $responseCaptchaData = json_decode($data);

    if($responseCaptchaData->success) {
        echo 'Captcha verified';
        //proceed with form values
    } else {
        echo 'Verification failed';
    }
}

When a real human submits your form, it generates a reCAPTCHA response which then the above code verifies with the Google API. If the form submits through bots then the above verification fails. You should proceed with the form only in case of a success response.

Our final code is as follows.

<?php
if (isset($_POST['g-recaptcha-response'])) {
    $secret_key = 'YOUR_SECRET_KEY';
    $url = 'https://www.google.com/recaptcha/api/siteverify?secret='.$secret_key.'&response='.$_POST['g-recaptcha-response'];
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_HEADER, false);
    $data = curl_exec($curl);
    curl_close($curl);
    $responseCaptchaData = json_decode($data);

    if($responseCaptchaData->success) {
        echo 'Captcha verified';
        //proceed with form values
    } else {
        echo 'Verification failed';
    }
}
?>
<form method="post" id="userForm">
    <p><input type="text" class="form-control" name="fullname" placeholder="Enter full name" /></p>
    <p><button class="g-recaptcha btn btn-primary" data-sitekey="YOUR_SITE_KEY" data-callback="submitForm">Submit</button></p>
</form>

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function submitForm() {
    document.getElementById('userForm').submit();
}
</script>

That’s it! Enjoy spam free forms on your website. I would like to hear your thoughts and suggestions in the comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

7 thoughts on “Integrate Google Invisible reCAPTCHA with PHP

  1. Is just me or this is not working? I just pasted the final and it says verification failed and keys are exactly as google recaptcha page.

  2. Hi,
    Nice tutorial for a noob like me.
    But on the part “Our final code is as follows.” section, is this a separate file something like “sample.php” or is it inline with the html?
    Or does the whole code mentioned here are in a single html file?
    Thank you in advance.

    1. It can be in a single file. Or else if you want to separate out JS code then it would be in a separate files.

Leave a Reply

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