How to hide the annoying Google reCAPTCHA v3 Badge

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:

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

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.

Related Posts
Join the Conversation

12 Comments

  1. Ryan says:

    Brilliant and quick fix! Thank you!

    1. Lorenz says:

      Gladly!

  2. Peter Szerdahelyi says:

    It works and is a perfect solution

    1. Lorenz says:

      Thanks! I’m glad to help you 🙂

  3. Stremove.com says:

    Not using CF7 came with my theme so just disabled and deleted it still have that annoying logo that leads to Google privacy pages instead of mine.

  4. Wisest says:

    @aqyn, this might hide the badge, but this doesn t stop the script from tracking ALL your visitors on ALL pages.

    1. ረድኤት says:

      Excellent! Thank you.Warmest regards from Ethiopia.

  5. Sam Idoeb says:

    Thank you for the trick.

    Greeting from Indonesia!

    1. Lorenz says:

      No problem. 🙂

Your email address will not be published.

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

This can also interest you