How to hide Google’s reCaptcha v3

Google reCaptcha v3

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.

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.

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 how to hide Google’s 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 
<a href=”https://policies.google.com/privacy”>Privacy Policy</a> and 
<a href=”https://policies.google.com/terms”>Terms of Service</a> 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 or post your question on our forum.

Leave a Reply

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