Hiding Google ReCAPTCHA v3

Learn how to remove Google ReCAPTCHA from your website without violating their terms and conditions.

Google’s ReCAPTCHA now no-longer has that robot test as it works in the background on websites and looks at the visiting person’s browsing habit to determine if they are a robot or not. So, it means they need to show their Privacy Policy, Terms and Conditions.

This article provides a solution for hiding that little wheel with arrows for Google’s new ReCAPTCHA. This solution has been ping-ed from Experts Exchange who seem to provide the best way so far!

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!

Originally sourced from: https://www.experts-exchange.com/articles/33413/How-to-remove-the-annoying-Google-reCAPTCHA-v3-badge-from-your-website-without-breaking-the-rules.html