How to remove the annoying Google reCAPTCHA v3 badge from your website, without breaking the rules

You are probably familiar with version 2 of the Google reCAPTCHA tool which displays the "I'm not a robot" checkbox next to a form. This tool is widely used because it's effective at preventing automated interactions with websites, such as submitting spam messages to website owners or brute forcing passwords.

Version 3 of the Google reCAPTCHA tool was released in 2018, and it works quite differently to v2. There's no longer a robot checkbox or for that matter any other checkbox when Google detects that you're human. Instead though, a Google reCAPTCHA badge is displayed in the lower right corner of the website. Perhaps the two biggest problems with the badge are that it displays the same fixed size on the narrow screen of a smartphone, and secondly, the badge is displayed ON EVERY SINGLE PAGE of your website, not just the page with the form.

Here's what the badge looks like on a Samsung S7:

It would be tolerable if it was displayed only on the page it was used on, but across the whole website, it's overly intrusive.

So here's how to get rid of it.

The Google Terms you agree to when creating the reCAPTCHA API key seem to prevent you from hiding the annoying badge, but thankfully Google has added the following note to their reCAPTCHA FAQ:

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following 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.

Great! This means you can just add some CSS to your site, and say bye-bye badge, as long as the above text is included in your form. No need to anything to be displayed sitewide. Here's the CSS you need:

.grecaptcha-badge { display: none; }

I prefer to add some commenting to the CSS, to help with maintainability of the site. I also want to ensure the font size of the T&C's text isn't too dominating, so I chose a font-size of 12px. This is what I add to my CSS:

/* Hide the Google reCAPTCHA badge, but note this requires a link to the Google T&C's to be added
  to contact forms. See https://developers.google.com/recaptcha/docs/faq for details. */
  .grecaptcha-badge { display: none; }
  .custom-recaptcha3-terms { font-size:12px; }

Then I add this to my forms, near the submit button. I've expanded the text a little from what Google has provided so that it makes more sense to users. If you use the tool for something other than spam prevention, you should reword that part though.

<p class="custom-recaptcha3-terms">To prevent spam, this site is protected by the Google reCAPTCHA tool. 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.</p>

Then you just need to reload the pages on your site containing the affected forms, to review everything worked ok, and the badge in the lower right should be gone. 

That's it; we're done!

Notes:

Differences to reCAPTCHA v2: reCAPTCHA v3 will never display a test to the user like the v2 version does. Instead, it just gives a score between 0 (bot) and 1 (human) estimating the likelihood of the site being loaded by a bot. It's up to the website developer to determine the required threshold, but the documentation appears to suggest a default of 0.5. 

WordPress "Contact Form 7" plugin reCAPTCHA issues: I decided to write this article after the WordPress plugin "Contact Form 7" ceased supporting reCAPTCHA v2 and required me to set up and use v3 keys to reactivate the reCAPTCHA on multiple websites. It was then I discovered the irritating badge throughout each site. If you have the same problem as I did, then you'll see a "[recaptcha]" shortcode tag appearing in your Contact Form 7 forms where the v2 reCAPTCHA previously displayed.

References:

Google reCAPTCHA FAQ: https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-v3-badge-what-is-allowed

Google reCAPTCHA v3 documentation: https://developers.google.com/recaptcha/docs/v3