Adding a captcha on the website forms is always been recommended. It’ll save your inbox and database from being filled with tons of spam. Cleaning up spam emails is a waste of time and it also occupies unnecessary space in the 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 or not. For real humans, 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 badge’ from ‘Challenge (v2)’.

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

Integrate Google Invisible reCAPTCHA

It requires a little bit of a different approach for adding an Invisible reCAPTCHA in the HTML form. You have to set data attributes – sitekey and callback on the submit button. The value passed to the callback will be used to submit the form through JavaScript.

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

Notice: Passing a g-recaptcha class to the submit button is compulsory.

You have to provide the reCAPTCHA site key to the data-sitekey attribute. The method name for the data-callback attribute can be user-defined. In my case, I set it to ‘submitForm’. 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.

How Google Validates reCAPTCHA?

Under the hood, Google adds the Textarea field having the name g-recaptcha-response to your web page. 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 hidden field which will be sent to the server side for further verification.

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 should be verified with the Google API. If the form submits through bots, the above verification fails. You can 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

• Using Google reCAPTCHA on Your Website Forms with PHP
• Validate Google reCAPTCHA using JavaScript
• A Guide on Adding Google reCAPTCHA v3 to your Laravel Website

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