The million+ of us WordPress users employing the Contact Form 7 plugin are probably the largest group exposed to Google’s new reCAPTCHA V3. You may have noticed, with the plugin’s December 2018 update, that reCAPTCHA V2 support has been dropped, effectively forcing us onto V3.

That didn’t seem like an inherently bad thing at first. I’m happy to keep up-to-date on the latest spam fighting technologies. I went to the reCAPTCHA admin, registered my site for V3, and plugged the new keys into Contact Form 7.

The problem

And that’s when the badge appeared on the lower right hand corner of my site.

On every page. With or without a contact form.

This was not ideal.

It also didn’t make any sense. Why was this reCAPTCHA script loading on a page without a contact form? I was experiencing, as others have experienced, a noticeable slowdown to my page load speeds. I’m trying to keep my sites lean.

This was the easier of my questions to answer, and an important one for you to consider upfront. Check out the reCAPTCHA V3 API doc. Here’s the pertinent bit:

reCAPTCHA works best when it has the most context about interactions with your site, which comes from seeing both legitimate and abusive behavior.

In other words, for it to function, it wants to see all of your users’ behavior on all of your pages. This is a fundamentally different technology than reCAPTCHA V2.

You may have arrived here wondering how to prevent reCAPTCHA V3 from running on your non-contact form pages. I’ll tell you how to do that, but you should know that doing so may defeat the whole purpose. Your reCAPTCHA implementation will be less effective, if not entirely worthless.

If you don’t want to implement reCAPTCHA V3 widely across your site, or you’re upset by the script slowing down your site, your best option may be to remove or replace Contact Form 7.

But, you may have a legit reason for limiting reCAPTCHA V3. If so, it can be done relatively simply.

Solution #1: Remove the reCAPTCHA script on select pages

I got a little help with this from Oh I Will, who were on the right track.

It’s a two step process. First, add a simple function to your theme’s functions.php file.

function recaptchaCheck() {
	if(!is_page(array(123, 456, 789))) {
		remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );
	}
}

Replace those numbers with the page IDs you want the reCAPTCHA script to actually run on. It will be removed from every page that does not match the specified IDs.

Conversely, if you want to specify the page IDs you do not want the script to run on, simply remove the “!” from the if statement and update the IDs accordingly.

Unfortunately, the is_page() function can’t be executed on your functions.php file. It doesn’t know what your current page ID is at that level. I spent more time than I should have trying to make it work when it never could, based upon numerous mistaken recommendations. Thanks Stack Exchange for finally clearing this up.

That’s why this is a two step process. is_page() is wrapped in another function that we’re going to call from a place where we can use it: all of our page templates.

Open your theme’s page.php file. At the top of the file, below the commented text, call the function within the PHP syntax or add the following on its own line.

<?php recaptchaCheck(); ?>

Add the same thing to every template file that you use in the page-templates folder.

Result: the reCAPTCHA script will be removed on the pages that you’ve defined in that recaptchaCheck if statement. You won’t take a hit on your page load speed, but remember that it’s at the expense of reCAPTCHA V3 functioning at its best.

Solution #2: Hide the reCAPTCHA badge

The second way of going about this is to merely hide the reCAPTCHA badge. The script is still going to load and potentially slow down your site, but you won’t have to deal with the visual encumbrance of the badge being there. I know on my sites, the back-to-top button perfectly overlaps the reCAPTCHA badge. Ugh.

For the record, hiding the badge is allowed, but with a caveat. Check out the reCAPTCHA FAQ. Pertinent bit:

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.

You need to let your visitors know that Google is tracking everything they do on your site. The badge communicates that. In its absence, you need to communicate it in another way. Google requires a specific block of text.

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

Put that where people can read it, and you can hide the badge without the Google police kicking down your door.

Then, all it takes is a little custom CSS. To hide it on every page:

.grecaptcha-badge {
	display: none;
}

To hide it on specific pages, use this, updating with the proper page IDs:

body.page-id-123 .grecaptcha-badge {
	display: none;
}

Or, to hide on every page except certain pages, bust out the :not pseudo-class:

body:not(.page-id-123) .grecaptcha-badge {
	display: none;
}

In summary

Perhaps by the time you read this, Contact Form 7 will add reCAPTCHA V2 support back into their plugin. Everyone will stop complaining and the sun will shine anew on a grateful world.

Or maybe Contact Form 7 will bake in the ability to hide or inhibit the loading of reCAPTCHA V3 so as to avoid workarounds such as the ones outlined here. It seems unlikely, given the privacy implications, but who knows?

But I thought it was important to write this to let you know what reCAPTCHA V3 really is. I didn’t know how fundamentally different it was from V2 when I implemented it. Consider that before you limit its script or hide its badge. Consider your site’s design and needs.

Then decide whether it’s worth the modifications—or whether to use it at all.