Why we need a CAPTCHA
Google’s reCaptcha is one of the most used tools in website development. In this article we are going to describe how to hide Google’s reCaptcha v3 badge. To get started, let’s answer the question why we need a captcha in the first place.
Captcha’s (Completely Automated Public Turing test to tell Computers and Humans Apart) are here to avoid spam submission by automated bots, but aren’t we all tired of constantly confirming we are not a robot? Above all, it is not that easy because otherwise there would be more practicable apps available. Webmasters around the globe mostly rely on Google’s reCaptcha as being the standard in avoiding a spam flood on a website through sign-up/contact forms of any kind.
The invisible solution, here it comes: Google reCaptcha v3
We all -sort of- got used to the “I’m not a robot” test of Google’s v2 reCaptcha. However, Google is acknowledging the v2 version won’t last in a high tech world strongly focussed on UX (User Experience), confirmed by all Google Developer testing tools.
So we got v3, the 3rd and invisible reCaptcha solution by Google, finally, but it is not the first attempt to have an invisible captcha function. The first idea of an invisible solution was a sub version of v2 which got adapted several times. Our webmasters tested these invisible versions of v2 and didn’t get the necessary functionality. Therefore, BRIZZO webmasters stayed away from it and worked with the standard v2 version for quite some time.
What is great about Google’s reCaptcha v3?
Yes, with v3 Google got rid of the test with the countless images of storefronts, cars and traffic lights. As a result, we don’t have to justify multiple times a day that we are not a robot. Yippie!
Google’s reCaptcha v3 works with an invisible score system powered by a risk analysis engine. For those of you who want to dig deeper on how it works, you can find all details on the official v3 landing page.
What is not that great about Google’s reCaptcha v3?
Here is the caveat: By using the v3 script Google is displaying a sticky logo at the bottom right corner of the page. Consequently, this influences the UX in an annoying way. Why? Think about the “back to top” buttons or chat room buttons, they are mostly on the bottom right page area. Yes, you can relocate the badge, but why should the v3 badge be visible all the time even on page content where there is no form to protect? This gives the visitor the impression the entire page/site is “protected by Google” but it is only a form submission helper, full stop.
So we want to hide the reCaptcha v3 badge.
So how to hide the reCaptcha v3 badge?
The website community is revolting against the sticky reCaptcha logo for a good reason, the user’s experience. Therefore, most webmasters try to hide the reCaptcha v3 badge. Here is one way to accomplish that:
.grecaptcha-badge { opacity:0;}
As reported on stack overflow the spam check is not working properly using the code “display:none;”. In addition, you can also use the code “visibility:hidden;” to hide the reCaptcha v3 badge.
Is there a legal problem when hiding the v3 badge?
Google is pretty picky about their assets and as stated by the Google terms they should not be altered in any way. Here is the good news: Google allows us to hide the v3 badge but we have to reference to the Google service directly on the form. Looks like this:
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
This is a great way as it adds the protection service hint directly where it should be and therefore avoids confusion for website visitors.
Webmasters will find confirmation of this practice for their clients by referring to the official Google Q&A page for that topic.
Update November 4th 2020: This solution is tested with WordPress up to version 5.5.3.
Was this article helpful for you? We appreciate any comment.
Need support to implement this? Drop us a message here.
___
Your BRIZZO Editorial Team – Google Topics
34 Responses
Hi there,
it wasn’t working for me (after implementing the code the badge dissappeared) and I found a fix –
just add =:
z-index:99!important
as well as –
right:unset!important
and it wont break
Hi Omer,
Thanks for reaching out. The code described in this blog post is meant to make the Google badge disappear. If you want the badge visible just do nothing and leave it as is.
Kind Regards,
Your BRIZZO Team
I can’t tell from your post but does your method of hiding the badge get around Googles requirement for displaying their disclaimer text on the form? I wouldn’t assume so but wanted to clarify as I’m trying to find an elegant solution.
Hi,
Thanks for reaching out.
As in our article described, Google requires to put the disclaimer directly into the form when the batch is hidden. However, there are already newer solutions available like Elementor does it where the badge is actually directly in the form which is a quite elegant solution. Always better than having that sticky badge at the bottom.
Have a great day!
Your BRIZZO Team
Hi all,
I really loved this tip. To that point, what I found with the “opacity: 0” rule was that there remained a placeholder the same size as the logo, which I might have overlooked if it had not been for the fact that the fields in my form had a background color applied. That made it stick out visually, so I continued my quest to “disappear” this thing.
So I tried “visibility: hidden.” That, in the end, did the same thing as the previous rule.
Then I remembered from my too many years of studying and writing code from scratch that CSS has two methods of hiding elements in the DOM and one of them leaves the space in the DOM defined; meaning that the object still takes up space on your page even if you can’t see it. That method is “visibility: hidden.” The other method that actually removes the element from the DOM, thereby preserving your layout as you had intended it to look, is “display: none.” The element still exists but is not included in the page layout. So that rule looks like the following.
.grecaptcha-badge {
display: none;
}.”
I highly recommend trying this CSS rule and see if it serves your purposes any better. Happy coding!
Hi Calicci:
Thanks for reaching out.
We totally agree, there are certainly different ways to let an element disappear via CSS. However, please click the link in the article which describes the problem people reported by applying “display:none;”. It is on Stack Overflow and they talk about reCaptcha functionality problems, not the visibility itself. That is the reason why we recommend “opacity:0;” over the other options.
Hope all works out for you.
Your BRIZZO Team
Just an FYI, I added !important to your CSS:
.grecaptcha-badge {
display: none !important;
}
I found that this was not trumping other styles for the grecaptcha-badge DIV.
Hi,
Thanks for reaching out.
As in our article described, Google requires to put the disclaimer directly into the form when the batch is hidden. However, there are already newer solutions available like Elementor does it where the badge is actually directly in the form which is a quite elegant solution. Always better than having that sticky badge at the bottom.
Have a great day!
Your BRIZZO Team
Instead of add recaptcha on every form, can I add the text “Thi site is protected….” on footer of my pages?
Is there any explicit prohibition in this sense or not?
Thanks 😉
Hi Luca,
Good Question. You might want to check out the Google Terms mentioned in the article. It sates to add it to the form directly which makes sense. If you want a general claim why remove the badge at all?
HTH
Your BRIZZO Team
This is working on desktop, but not mobile or tablet. Any idea why?
Hi Caryn,
It should work on all devices, the code is not screen specific. Please double check your CSS for mobile, maybe there is a conflict.
Best Regards,
Your BRIZZO Editorial Team
thanks this is just what i was looking object of! i am bookmarking this any longer
Hi there,
We are glad you found what you needed.
Stay tuned,
Your BRIZZO Editorial Team
Very educative post, learned a lot from this article.
So glad I discovered your blog, and was able to learn new
things. Keep posting articles, it’s really valuable.
Best regards,
Demir Cannon
Hi Demir:
Thanks for the nice words.
All the best for you!
Your BRIZZO Editorial Team
can i move the badge to left bottom area ??
Hi,
Thanks for reaching out.
You certainly can change the position with CSS, but please keep in mind Google is using a simple image and on hover it gets pulled to the left to show the entire image. So moving the entire element to the left might need some TLC 😉
Let us know how it goes!
Your BRIZZO Editorial Team
Thank you so very much! I searched and searched for help with this (in a Google Search engine 🙄). This works wonderfully on a Divi site. I appreciate that extra bit you’ve included for legality. Many thanks! I’ll be putting this on all my sites. Cheers from Australia.
Hi Kerrie,
That is awesome. Good to know it is working in Austrialia, too 😉
Please check out our newest accessibility service. Giving people with disability access to all websites is our duty as web companies.
Good luck with your Divi site.
Your BRIZZO Editorial Team
I just want to say thank you! Worked perfectly!
Hello Morgan!
That is great to hear. Thank you for letting us know.
Good luck with your projects!
Your BRIZZO Editorial Team
PS: Don’t forget to check out our new ADA tool to protect website owners from lawsuits.
Thank you so much for the great tips. it worked for me on my WordPress Divi site.
Hello Reza!
Thank you very much for the feedback. We also tested it on other, more modern page builder like Elementor.
Thanks you and Happy New Year!
Your BRIZZO Editorial Team
This code working like a charm! Thanks for the simple tricks.
Hi Mohsin,
Great it is working for you. You certainly can also enhance the code with target=_blank etc.
Keep on coding.
Thanks again,
Your BRIZZO Editorial Team
Hi, it’s not working – only in Safari. Not in Chrome and Firefox. Why is that?
Hi Henrik,
Thanks for reaching out. If your website is hosted with BRIZZO you can open a ticket with us and we fix it for you.
If you aren’t with BRIZZO please send us an email to support@brizzo.net and explain on what platform (Magenta, WordPress, etc.) you are working and what the issue is (e.g. form not working or form working, but badge still visible).
Thanks,
Your BRIZZO Editorial Team
Works well. Thank you very much!
Very cool! Thanks for the feedback.
Your BRIZZO Editorial Team
Works like a breeze, thanks for the article!
Glad it worked.
Your BRIZZO Editorial Team
Can you inform me what platform are you making use of on this website?
Hi Dee:
Thanks for reaching out! We are using it on WordPress and it is tested up to WordPress 5.1.1 (as per today, April 5th 2019).
HTH,
Your BRIZZO Editorial Team