How to hide the reCaptcha v3 badge?

//Hide the reCaptcha v3 badge the right way

Hide the reCaptcha v3 badge the right way

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

Update June 19th 2019: This solution is tested with WordPress up to version 5.2.2.

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

By |January 22nd, 2019|Categories: Tips|Tags: , , , |8 Comments

8 Comments

  1. Dee March 12, 2019 at 11:45 pm - Reply

    Can you inform me what platform are you making use of on this website?

    • Editorial Team April 5, 2019 at 6:53 pm - Reply

      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

  2. Ben March 22, 2019 at 11:15 am - Reply

    Works like a breeze, thanks for the article!

    • Editorial Team March 23, 2019 at 9:17 am - Reply

      Glad it worked.

      Your BRIZZO Editorial Team

  3. chantal May 1, 2019 at 9:15 pm - Reply

    Works well. Thank you very much!

    • Editorial Team May 2, 2019 at 9:18 pm - Reply

      Very cool! Thanks for the feedback.

      Your BRIZZO Editorial Team

  4. Henrik May 28, 2019 at 8:40 am - Reply

    Hi, it’s not working – only in Safari. Not in Chrome and Firefox. Why is that?

    • Editorial Team May 29, 2019 at 3:48 pm - Reply

      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

Leave A Comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.