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.
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:
- Log in to your WordPress dashboard
- Go to Appearance » Customizer
- Click Additional CSS
- Add the snippet below:
.grecaptcha-badge { visibility: hidden; } - 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:
- Add a new Text Module below the Contact Form Module
- Click the Text tab and paste the HTML above.
- Remove unwanted line breaks and style the text in the Design tab.
- 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.
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
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!
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! 🙂
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
Top notch! 👉
Hello!
Do I only need to add the reCAPTCHA disclaimer on my contact forms, or do I also need to include it on pages with email subscription forms??
Hi Bo! If you are using Google reCAPTCHA in your email subscription forms, you need to add the disclaimer there too.
Hi – I added the code, but it’s still showing even after clearing the cache: https://www.modernx.com/ Any assistance you can provide is appreciated. Cheers, Dan
Hi Dan! Try to add this CSS snippet instead:
.grecaptcha-badge {visibility: hidden !important;
}
Let me know how it goes! 🙂
Hi there, thank you very much for all the info. At first, the code didn’t work for me neither, but then I added opacity: 0 and it all worked out fine. One note about the ReCaptcha disclaimer snippet: since the link provided by Google go straight on their policies and you don’t want your visitors to leave your site following a privacy disclaimer, I have “targeted blank” the two links, and while I was at it, i restyled it putting reCaptcha in bold, and it looks like this in case you are interested:
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Thank you!!!!
Ooooops, I just figured out that posting the comment published the actual links and not the html, sorry…. I don’t know how to switch to raw text her but i think you got the point of my previous comment.
Thanks for the feedback! 🙂