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.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 Privacy Policy and Terms of Service 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.To prevent spam, this site is protected by the Google reCAPTCHA tool. The Google Privacy Policy and Terms of Service apply.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!

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.

Recommended Posts