Integrate Google Invisible reCAPTCHA with PHP

Adding captcha on the website forms is always been recommended. It’ll save your inbox and database from being filled with tons of spam. It is a waste of time cleaning up spam emails and it also occupies unnecessary space in the server database.

Google reCAPTCHA is a popular choice for protecting your forms against bots. Using Google reCAPTCHA, you can find if the real human is interacting with the form so you will safely proceed with your forms.

The hCaptcha is another option to fight against bots. Follow the linked article which explains the integration of hCaptcha on the website.

In this article, we study how to integrate Google Invisible reCAPTCHA on your website forms with PHP. When you use Invisible reCAPTCHA, your visitors do not need to solve puzzles. It validates 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 the option ‘Invisible reCAPTCHA’ from ‘reCAPTCHA v2’.

invisible-recaptcha

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

recaptcha-keys

Integrate Google Invisible reCAPTCHA

In order to add an Invisible reCAPTCHA in the form, it 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" name="fullname" placeholder="Enter full name" /></p>
    <button class="g-recaptcha" data-sitekey="YOUR_SITE_KEY" data-callback="submitForm">Submit</button>
</form>
 
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
function submitForm() {
    document.getElementById('userForm').submit();
}
</script>

To integrate Google reCAPTCHA you must pass data-sitekey and data-callback attributes. Also, passing a g-recaptcha class to the button is compulsory.

You have to add 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.

At this moment, if you reload the page, you will see the reCAPTCHA logo on the bottom-right corner of the page.

Google adds the Textarea field having the name g-recaptcha-response. This field is kept hidden and you can’t see it on your page. You can check this field with your browser inspect tool. Google sets the value to this field which will be sent to the server-side for further verification.

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);
    $response = json_decode($data);
 
    if($response->success) {
        echo 'Captcha verified';
        //proceed with form values
    } else {
        echo 'Verification failed';
    }
}

When a real human submits the form, it generates a reCAPTCHA response which is verified with the Google API. If the form submits through bots, the above verification fails. You should proceed with the form only when you receive a success response.

Final Code

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

9 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.