How to Remove or Hide reCAPTCHA V3 in WordPress. But Be Careful.

In Technology
Scroll this

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.

4 Comments

  1. Hey there!

    First off, thanks for this post. I was looking for a way to remove the reCaptcha code from all pages without a contact form and it really helped me achieve it.

    Secondly, I’ve just found another website where they’re actually executing the is_page() function on the functions.php file.
    They just call their custom function in a different way.

    Google for “Optimizing Contact Form 7 for Better Performance” and you’ll find the tutorial on the Code [dot] tutsplus [dot] com site (I’m not linking directly so that my comment doesn’t get blocked by your spam filter).

    If you follow their approach, all you’ll need is the actual name of the reCaptcha script in order to de-register it, I believe (which, unfortunately, I don’t know yet).

    Thanks again and I hope my comment here helps a bit too.

  2. Hi Louis. Thanks for writing. It seems you’re absolutely right: when is_page is being called from within a function that’s triggered by an add_action on the functions.php file, that is_page will execute at a time when it’s capable of getting a value.

    In other words, all of one’s code could reside solely in the functions.php file, without having to go into the page templates.

    I appreciate the insight. I hope it’s helpful for others!

    • That’s exacty it, Peter. And you’ll also need to set the priority argument of the add_action function to some time before (i.e., a lower integer) than what’s being used on the plugin’s recaptcha.php file.

      Here’s the code that I put on my theme’s functions.php file. It stops both the recaptcha JavaScript and CSS files from being loaded if we’re not visiting the url with the “contact” slug — all people need to change is this bit of code to reflect their contact page’s slug. (Credit for the first part of the code goes to the website I had mentioned in my earlier comment. Credit for the second part goes 50% to you and the rest to me.)

      // Deregister Contact Form 7 JavaScript files on all pages without a form
      add_action( ‘wp_print_scripts’, ‘aa_deregister_javascript’, 100 );
      function aa_deregister_javascript() {
      if ( ! is_page( ‘contact’ ) ) {
      wp_deregister_script( ‘contact-form-7’ );
      }
      }

      // Remove Contact Form 7’s reCAPTCHA files on all pages without a form
      add_action( ‘wp_enqueue_scripts’, ‘aa_remove_recaptcha’, 9 );
      function aa_remove_recaptcha() {
      if ( ! is_page( ‘contact’ ) ) {
      remove_action( ‘wp_enqueue_scripts’, ‘wpcf7_recaptcha_enqueue_scripts’ );
      }
      }

      Thanks,
      Louie

  3. Thanks Jason, went the route of loading on all, but hiding with the disclaimer in the footer. I’m kind of 75% happy with that approach, we’ll see. Cheers for the helpful article anyway.

Submit a comment

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