Hide annoying Google reCAPTCHA v3 Badge

Hide annoying Google reCAPTCHA v3 Badge Thumbnail
Published on 19. June 2019Last updated on 2. August 2020

The Google reCAPTCHA has already been encountered by most people on a website. In the new version (v3), Google now shows a fade-in at the bottom right corner. That’s not very nice, so I’ll show you here how you can remove this fade-in with a little CSS.

Advertisement

For many years Google has been providing the reCAPTCHA v2 (Version 2). This works quite reliably, but is annoying for users, because you have to solve picture puzzles. And often several of them in a row. For this and other reasons Google has introduced and released reCAPTCHA v3 (Version 3).

Here the user no longer has to do any tasks, everything runs invisibly in the background. Only such a badge is displayed at the lower right edge of the website:

Google reCAPTCHA v3 in closed state
Google reCAPTCHA v3 in closed state
Google reCAPTCHA v3 in unfolded state (when hovering)
Google reCAPTCHA v3 in unfolded state (when hovering)

Yes! according to Google’s FAQ about the reCAPTCHA you are allowed to hide the badge. However, you have to add a note in the “user flow”.

Advertisement

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

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

Google suggests this text for this purpose:

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.

Note: I am not a lawyer, so you should always have such legal information legally checked.

How to remove the badge

All you have to do is include this line of code in your CSS file:

Advertisement
.grecaptcha-badge { visibility: hidden; }

Note that you are not using display: none; under any circumstances! This will disable the spam protection of the reCAPTCHA.

Remove Google reCAPTCHA in WordPress

If you use Google reCAPTCHA on your WordPress page, e.g. in connection with Contact Form 7, you can hide the badge without any problems.

Proceed as in the step shown above. You can either put the CSS in a CSS file of your theme (or child themes), or you use the backend and put the code at the bottom of the file under Design > Theme Editor > Stylesheet (style.css). Alternatively, you can also insert it under Design > Customizer > Additional CSS.

Of course, the same legal regulations also apply.

Related Posts
6 replies on “Hide annoying Google reCAPTCHA v3 Badge”

Comments are closed.