reCaptcha v3: How to implement on WordPress custom forms to stop bot signups

Including reCaptcha as a security layer is one way to fight against bots. In this article, let’s discuss how to implement reCaptcha v3 on a custom forms. Also, we will take a look what are the differences among the reCaptcha versions.

Task description

• Install reCaptcha v3 in the page only where there is a registration form. The form includes fields such as name, website url, email, text areas, a selection field, phone number field which have some basic jQuery validation.
• Test if the reCaptcha is installed correctly.

By installing the reCaptcha only when there is the form that needs to be checked, we save time and http request for a better performance.

I think this is a good habit for WordPress users to remove unnecessary things because as you might notice, whenever installing a new plugin, more or less there will be custom js and css files to load with your page not care about does the page needs it or not, which increases the http requests and makes the website slowlier.

We will need a Site Key and a Secret Key to use the reCaptcha. This is free to setup and retrieve so you can go to the dashboard and register your website here. After that you can have 1 Site Key and 1 Secret Key.

reCaptcha v2 and v3: What are the differences?

Which types of reCaptcha to choose from? What are their differences?

So when registering a new domain name, you will be asked to choose the type of reCaptcha to be implemented. Most of the time I was confusing with reCaptcha v3, and reCaptcha v2: I’m not a robot and Invisible reCaptcha badge. Let’s have a quick look how they are different.

Some images of reCaptcha.

So basically:

• reCaptcha v3 does not require users to do anything themselves, but instead give a score based on their behavior with the web page. The lower the score, the higher the possibility it is a bot.
• reCaptcha v2 sometimes let user pass without doing anything, or with checking the box “I’m not a robot”, sometimes ask for extra puzzle solving.
• With reCaptcha v2, if the system suspects that you are a bot, you still can prove that you are human with extra challenges e.g image selection.
• With reCaptcha v3, if you are not a bot and google thinks you are a bot, you can’t do anything. But, this strictness level can be customized with a lower threshold score.

Implementing reCaptcha v3 on WordPress

There are two ways that the reCaptcha can be implemented on WordPress: using a plugin or code it yourself.

Using plugin: Invisible reCaptcha for WordPress

Notice: Some form plugins for WordPress already have the reCaptcha integration, so if you only want for e.g Contact Form 7 you don’t need to download any extra plugin because the form itself will let you paste in the Site Key and Secret Key for spam prevention.

For Gravity Forms, Contact Form 7, WooCommerce or common WordPress forms like login or register, you can have a look at Invisible reCaptcha for WordPress by Mihai Chelaru. The plugin has quite straightforward instructions on how to implement the invisible reCaptcha on WordPress.

So if you have many forms and want a quick way to do this, then just go ahead and download the plugin, then go to the Settings and input your Site Key and Secret Key and you’re ready to go.

It is easy if you want to integrate it with Contact Form 7, or Gravity Forms as you only need to tick the buttons in the plugin’s settings page. But if you would like to have it on a custom form which is custom coded, there are some hooks that you can use, as reference from the plugin developer. For basic setup, we can use the google_invre_render_widget_action action and google_invre_is_valid_request_filter.

So to the theme’s functions.php:

function add_recaptcha() {
    // Only place the script where we need it
    if(!is_single('new')) return; 
    do_action('google_invre_render_widget_action');
}
/** 
 * Validate with Invisible reCaptcha
 * Returns bool
 */
function recaptcha_validate() {
    $is_valid = apply_filters('google_invre_is_valid_request_filter', true);
    return $is_valid;
}

On the HTML page template of the form, add this before the </form> closing tag:

<?php add_recaptcha(); ?>

Alternatively, you also can add the code straight to the page template before the form closing tag. This is a faster way to do and also ensures that you only have the code on the form page.

do_action('google_invre_render_widget_action');

If doing it correctly we can see the reCaptcha badge on the form page, bottom right. Then, in the PHP processing file, validate the form with recaptcha before processing it.

if ( !recaptcha_validate() ) {
    http_response_code(400);
    echo 'Spam check fails. Please contact us.';
    exit;
}
// continue to retrieve and process data

Depending on your structure it might look different, but in a nutshell what we have to do:

• Call do_action(‘google_invre_render_widget_action’); to add the recaptcha possibility to the form.
• Write a function with google_invre_is_valid_request_filter to check if the form return is not submitted by a bot.

So hope it helps. I did not process far with this setup because it has conflicts with jQuery validation, where the form submitted with only reCaptcha validation and ignore other validation. So I switch to the code solution.

Without plugin: reCaptcha v3 with PHP and Javascript

The steps are quite similar as to use the plugin. Basically what we need to do is:

• Add a reCaptcha token to the form
• Check with Google if the form submission looks legit, based on the token
• Refuse or pass based on the result that Google returns

Add reCaptcha token to the form

Let’s add a hidden field before the form closing tag:

<input type="hidden" name="token" id="token">

Next, add the value of the form to be equal to the token that is provided by the reCaptcha. We will do it with this piece of javascript, as instructions on the reCaptcha docs:

<script src='https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key={KEY}</script>
<script>
function() {
    grecaptcha.execute('_reCAPTCHA_site_key_', {
        action: 'homepage'}).then(function(token) {
            document.getElementById('token').value = token; 
        });
    });
}
</script>

If doing it correctly we can see the reCaptcha badge on the form page, bottom right.

Now if you inspect the hidden field with the browser console, you can see a string of token attached to it. This string will change everytime the form loads.

Check with Google if the form submission looks legit, based on the token

Depending on your file structure, you can write this as a private function in a class or if you do not have any structure, you can paste this to your functions.php.

Google will return with a json object.

'success': true|false, // whether this request was a valid reCAPTCHA token for your site
'score': number, // the score for this request (0.0 - 1.0)
'action': string, // the action name for this request (important to verify)
'challenge_ts': timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
'hostname': string, // the hostname of the site where the reCAPTCHA was solved
'error-codes': [...] // optional

Because we only need to check is it legit or not, let’s just take the “success”. So it will return true or false, and we based on that to continue processing the form or to stop.

function recaptcha_check() {
    if( !isset($token) )) return false;
    $siteverify = 'https://www.google.com/recaptcha/api/siteverify';
    $response = file_get_contents($siteverify . '?secret=' _YOUR_SECRET_KEY_ . '&response=' .  $token);
    $response = json_decode($response, true);
    return $response['success'];
}

Validate before processing the form:

if ( !recaptcha_validate($_POST['token'] ) ) {
    http_response_code(400);
    echo 'Spam check fails. Please contact us.';
    exit;
}
// continue to retrieve and process data