How to remove reCAPTCHA badge from website

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.

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:

Can I just remove the reCAPTCHA badge? (legal)

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”.

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 reCAPTCHA badge

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

.grecaptcha-badge { visibility: hidden; }

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

Hide Google reCAPTCHA Badge 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.