Hide The Google reCAPTCHA Badge In WordPress (Without Breaking The Rules)

Google reCAPTCHA v3 is a convenient way to protect your WordPress forms from spam. But is it possible to hide the reCAPTCHA badge from your pages? The answer is YES but there are a couple of mistakes that you might want to avoid. Here is how you remove the badge the right way.

Why is there a reCAPTCHA badge on my website?

If you add Google reCAPTCHA V3 spam protection to a form on your website, you will see a square-shaped badge in the bottom right corner. The badge contains the reCAPTCHA logo and the text “Privacy – Terms”. When you hover the badge, it says “protected by reCAPTCHA” and you can click the links to read the Privacy policy and the Terms of service from Google.

Google reCAPTCHA badge
Google reCAPTCHA v3 badge

The reCAPTCHA v3 analyzes visitor data in order to track potential spammy behaviour on your website. The badge is displayed for integrity reasons and this is something that all website owners have to approve when signing up for the service.

But why is the badge displayed on all my pages, even if they don’t contain forms?

Google reCAPTCHA v3 is tracking the visitors on all your pages and how they move between pages. This is an effective way to separate bots from real humans. The script runs in the background sitewide, and not just when a form is loaded.

How to hide the Google reCAPTCHA v3 badge, step by step

The badge does probably not blend in well with the rest of your websites’ design concept, so let’s hide it using the method recommended by Google:

  1. Log in to your WordPress dashboard
  2. Go to Appearance » Customizer
  3. Click Additional CSS
  4. Add the snippet below:
    .grecaptcha-badge { 
    visibility: hidden; 
    }
  5. Save and preview in frontend.

The badge should now be hidden from your website.

⚠️ Important! Do not use display:none since that will disable the spam protection, according to initiated sources at Stack Overflow. 

Troubleshooting: Is the badge still visible? Here's the fix!

The snippet above is the one provided by Google. However, sometimes the badge is still visible after implementing the code.

If this is the case, try the snippet below instead:

/* Force the badge to be hidden */

.grecaptcha-badge {
visibility: hidden !important;
}

Disclaimer: According to my testing, this should not disable the reCAPTCHA feature but since this is not the recommended way from Google, you should check your reCAPTCHA analytics to make sure that it still operates.

The last step: Adding a mandatory text to your forms

According to the Google FAQ you are obligated to add a text in connection you your forms if you hide the reCAPTCHA v3 badge:

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

Source: Google

How to add the reCAPTCHA disclaimer below your Divi Contact Form

Just follow these simple steps to add the disclaimer text below yout Divi contact form:

  1. Add a new Text Module below the Contact Form Module
  2. Click the Text tab and paste the HTML above.
  3. Remove unwanted line breaks and style the text in the Design tab.
  4. Save and preview in frontend.

The same rule applies for the Divi Optin Module and any other form that is protected by Google reCAPTCHA v3.

Add Google reCAPTCHA text to your Divi Contact Form

That’s all for today!

I hope that you enjoyed this post. Subscribe to DiviMundo on YouTube and join our Facebook group for more crisp content on WordPress and web design. Cheers!

👉 Related post: How to add Google reCAPTCHA v3 to a Divi Contact Form

👉 Related post: How to move the Google reCAPTCHA v3 badge to the left side

Related posts

4 Comments
  1. I am having issues with this badge. I have followed the instructions above and published the changes but the reCAPTCHA v3 badge is still visible. Is there something i am missing? Everyone seems to be using this method to hid theirs and I’m not having any luck. I inserted that snippet of code into the Additional CSS field for my DIVI theme and nothing. Any suggestions would be greatly appreciated. The recaptcha badge is in the way of our “call now” button as well as the “scroll to top of page” feature. Thank you!

    Reply
    • Hi TJ! You can’t hide the badge on pages where you have forms that use reCAPTCHA protection. So if you have an email optin or contact form in the global footer, the badge will display in all pages regardless of the visibility snippet.

      However, there are few other options to avoid overlapping. You can move the badge to the left side: https://divimundo.com/blog/how-to-move-the-recaptcha-v3-badge-to-the-left/

      You can also push the badge up a few pixels: https://divimundo.com/blog/move-up-the-recaptca-badge/

      If you really want to hide the badge, you could try to add !important after hidden. It might work, but it might also disable the reCAPTCHA protection. Play around and look in the reCAPTCHA analytics to see if it still works. But I don’t recommend it since it’s not approved by Google.

      Let me know how it goes! 🙂

      Reply
      • Thanks so much! You helped me find the problem, the contact field in the global footer. And adding !important seems to have hidden the badge, while still allowing the reCAPTCHA to function it seems. Thanks again

        Reply

Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo