How to hide the Google Invisible reCAPTCHA badge

Question

When implementing the new Google Invisible reCATPTCHA, by default you get a little "protected by reCAPTCHA" badge in the bottom right of the screen that pops out when you roll over it.

I'd like to hide this.

Evasion

Answer 1

I have tested all approaches and:

WARNING: display: none DISABLES the spam checking!

visibility: hidden and opacity: 0 do NOT disable the spam checking.

Code to use:

.grecaptcha-badge { 
    visibility: hidden;
}

When you hide the badge icon, Google wants you to reference their service on your form by adding this:

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

Curious

This answer needs to be higher up! It contains all the necessary information for the solution in a succinct manner. – Goble

Exactly what I was looking for and this works great. Also for anyone looking for proof that it is allowed please check this page(if you haven't already seen it all over this SO thread) developers.google.com/recaptcha/docs/faq – Hebdomadal

Thanks for mentioning this @Jake. I have added this to my answer. – Curious

Has anyone found a documented way of hiding the badge rather than a css hack? Google offers an alternative way to show their branding but I can't find a supported method of hiding their badge. – Incorruptible

Well what happens if you don't add that last part to your form? (Not that I have any problems with it, but for instance on WordPress you can't really modify the forms very easily or sometimes at all.) – Coward

Could I put this at the bottom footer? – Aguilar

Answer 2

Google now allows to hide the Badge, from the FAQ :

I'd like to hide the reCAPTCHA badge. What is allowed?

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.

For example:

So you can simply hide it using the following CSS :

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

Do not use display: none; as it appears to disable the spam checking (thanks @Zade)

Himeji

Accept it, or choose a different service. Google has every right to require you to show the branding for their free service. You can even reposition the badge to be inline with the form developers.google.com/recaptcha/docs/invisible#render_param. – Subclavius

Well, I only use this captcha v3 on my contacts form page. So this is the only page I want this badge to show. It does not apply elsewhere on my site. Possible? – Glace

@AndrewTruckle Why wouldn't it be? – Anxious

@Anxious I now understand that the system analyses all pages to work out it something is a bot or not. – Glace

@Himeji - please update your answer. It's fine to hide it and e.g. add it to just the contact page: developers.google.com/recaptcha/docs/faq – Paucity

just wondering if it applies to v3 only or we can also hide v2 badge as well – Dialectology

I successfully hid .grecaptcha-badge on one second with this method but suddenly is rerendered and attribute from style is removed. – Breviary

@Coolman Don't use the local style-attribute or JS-logic to add the styles, but add the above mentioned CSS selector to your global style sheet. – Overtrick

What does "user flow" mean here? As I live in Europe: Is it sufficient, to add the reCAPTCHA branding to the GDPR consent layer? – Overtrick

Is it okay to put it at the bottom next to the footer? – Aguilar

Answer 3

Set the data-badge attribute to inline

<button type="submit" data-sitekey="your_site_key" data-callback="onSubmit" data-badge="inline" />

And add the following CSS

.grecaptcha-badge {
    display: none;
}

Evasion

Be careful; this appears to disable the spam checking. – Lisle

Does this really disable the spam checking? If so, why all the upvotes? – Stationary

@Lisle maybe instead use opacity: 0 or visibility: hidden ? also do u have a link to where it stats that ? – Bale

The user agreement says that you have to inform the users as @Himeji says above. – Geller

@Curious worth a separate answer? – Aniconic

This answer is excellent and evil Muhahahaaaaaaaa. joke. I think we should give a proper link to Google for its free service! – Sibyls

Answer 4

For Google reCaptcha v3, the FAQ says:

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.

For example:

Note: if you choose to hide the badge, please use

.grecaptcha-badge { visibility: hidden; }

It isn't clear whether it applies to reCaptcha v2. I suggest upgrading to v3 as it's a better experience for your visitors.

Sathrum

Only applicable to v3! v2 still requires showing the badge. :( – Mitch

@Mitch does this still apply? sauce? – Beggarly

@user13160957 I updated the answer. It still applies to v3. – Mitch

@Mitch I can't see why this would only apply to v3. Can you please give a reference to the source of your information? – Overtrick

@RenéSchubert as I mentioned: "It isn't clear whether it applies to reCaptcha v2." Looking again at the linked FAQ, it would seem that you should be able to do this in v2 as well without violating terms. Only Google can answer this definitely! – Mitch

The disclaimer should be used in all the forms inside the page?, or being in 1 is enough?, what about services not present on forms? (like page load), is it necessary to show the badge/disclaimer on the page? – Smallman

Answer 5

Since hiding the badge is not really legit as per the TOU, and existing placement options were breaking my UI and/or UX, I've come up with the following customization that mimics fixed positioning, but is instead rendered inline:

You just need to apply some CSS on your badge container:

.badge-container {
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
  width: 70px;
  height: 60px;
  margin: 0 auto;
  box-shadow: 0 0 4px #ddd;
  transition: linear 100ms width;
}
.badge-container:hover {
    width: 256px;
}

I think that's as far as you can legally push it.

Roderickroderigo

Nice. I pushed it even further (without actually hiding it completely) using transform: scale(0.6) and opacity: 0.6 – Ruffner

Are you able to have the blue banner open to the right than the left? Also adapt the colour scheme of it? – Dustidustie

@VaishalPatel in theory, yes, but there are two cons: firstly, tampering with native badge design is discouraged by Google and secondly, the more assumptions about existing design you make in your changes, the more fragile your solution becomes - keep in mind Google is free to change badge styles and layout whenever they feel like it. – Roderickroderigo

@Roderickroderigo I went with their default style inline. – Dustidustie

This answer is outdated, look at the FAQ. – Overtrick

Answer 6

Yes, you can do it. you can either use css or javascript to hide the reCaptcha v3 badge.

1. The CSS Way use display: none or visibility: hidden to hide the reCaptcha batch. It's easy and quick.

.grecaptcha-badge {
    display:none !important;
}

2. The Javascript Way

var el = document.querySelector('.grecaptcha-badge');
el.style.display = 'none';

Hiding the badge is valid, according to the google policy and answered in faq here. It is recommended to show up the privacy policy and terms of use from google as shown below.

Abramson

'not querySelect' but 'querySelector'. – Gehrke

display: none DISABLES the spam checking! – Sterile

Property 'style' does not exist on type 'Element'. – Trimetrogon

Answer 7

I decided to hide the badge on all pages except my contact page (using Wordpress):

/* Hides the reCAPTCHA on every page */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Shows the reCAPTCHA on the Contact page */
/* Obviously change the page number to your own */
.page-id-17 .grecaptcha-badge {
    visibility: visible !important;
}

I'm not a web developer so please correct me if there's something wrong.

EDIT: Updated to use visibility instead of display.

Caponize

this will work but the page-id-# is specific to your website so anyone using this will need to adjust the id to fit the page they want to perform the display on. || I have seen reports saying that doing this display:none; will also disable the checking but I am not sure about that right now. – Benham

Careful! This disables the spam checking. Check my answer for more info – Curious

Updated based on above comments from Michael & Helenesh – Caponize

Answer 8

Note: if you choose to hide the badge, please use
.grecaptcha-badge { visibility: hidden; }

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.

more details here reCaptacha

Electrolyze

This should be the updated/correct answer. display: none itself disables spam checking if you don't put the text This site is protected.... – Partiality

Answer 9

A slight variant of Matthew Dowell's post which avoids the short flash, but displays whenever the contact form 7 form is visible:

div.grecaptcha-badge{
    width:0 !important;
}

div.grecaptcha-badge.show{
    width:256px !important; 
}

I then added the following to the header.php in my child theme:

<script>
jQuery( window ).load(function () { 
    if( jQuery( '.wpcf7' ).length ){ 
        jQuery( '.grecaptcha-badge' ).addClass( 'show' );
    }
});
</script>

Deutzia

Answer 10

this does not disable the spam checking

div.g-recaptcha > div.grecaptcha-badge {
    width:0 !important;
}

Liscomb

Answer 11

My solution was to hide the badge, then display it when the user focuses on a form input - thus still adhering to Google's T&Cs.

Note: The reCAPTCHA I was tweaking had been generated by a WordPress plugin, so you may need to wrap the reCAPTCHA with a <div class="inv-recaptcha-holder"> ... </div> yourself.

CSS

.inv-recaptcha-holder {
  visibility: hidden;
  opacity: 0;
  transition: linear opacity 1s;
}

.inv-recaptcha-holder.show {
  visibility: visible;
  opacity: 1;
  transition: linear opacity 1s;
}

jQuery

$(document).ready(function () {
  $('form input, form textarea').on( 'focus', function() {
    $('.inv-recaptcha-holder').addClass( 'show' );
  });
});

Obviously you can change the jQuery selector to target specific forms if necessary.

Rodriguez

Answer 12

For users of Contact Form 7 on Wordpress this method is working for me: I hide the v3 Recaptcha on all pages except those with Contact 7 Forms.

But this method should work on any site where you are using a unique class selector which can identify all pages with text input form elements.

First, I added a target style rule in CSS which can collapse the tile:

CSS

 div.grecaptcha-badge.hide{
    width:0 !important;
}

Then I added JQuery script in my header to trigger after the window loads so the 'grecaptcha-badge' class selector is available to JQuery, and can add the 'hide' class to apply the available CSS style.

$(window).load(function () { 
    if(!($('.wpcf7').length)){ 
      $('.grecaptcha-badge').addClass( 'hide' );
       }
});

My tile still will flash on every page for a half a second, but it's the best workaround I've found so far that I hope will comply. Suggestions for improvement appreciated.

K

Answer 13

If you are using the Contact Form 7 update and the latest version (version 5.1.x), you will need to install, setup Google reCAPTCHA v3 to use.

by default you get Google reCAPTCHA logo displayed on every page on the bottom right of the screen. This is according to our assessment is creating a bad experience for users. And your website, blog will slow down a bit (reflect by PageSpeed Score), by your website will have to load additional 1 JavaScript library from Google to display this badge.

You can hide Google reCAPTCHA v3 from CF7 (only show it when necessary) by following these steps:

First, you open the functions.php file of your theme (using File Manager or FTP Client). This file is locate in: /wp-content/themes/your-theme/ and add the following snippet (we’re using this code to remove reCAPTCHA box on every page):

    remove_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts' );

Next, you will add this snippet in the page you want it to display Google reCAPTCHA (contact page, login, register page …):

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
    add_action( 'wp_enqueue_scripts', 'wpcf7_recaptcha_enqueue_scripts', 10, 0 );
}

Refer on OIW Blog - How To Remove Google reCAPTCHA Logo from Contact Form 7 in WordPress (Hide reCAPTCHA badge)

Cling

Answer 14

I saw next comment about this

It's also helpful to place the badge inline if you want to apply your own CSS to it. But do remember that you agreed to show Google's Terms and conditions when you registered for an API key - so don't hide it, please. And while it is possible to make the badge disappear completely with CSS, we wouldn't recommend it.

Chrissa

Answer 15

Recaptcha contact form 7 and Recaptcha v3 solution.

body:not(.page-id-20) .grecaptcha-badge {
    display: none;
}

More Than One Contact Form Page?

body:not(.page-id-12):not(.page-id-43) .grecaptcha-badge {
    display: none;
}

You can add more “nots” if you have more contact form pages.

body:not(.page-id-45):not(.page-id-78):not(.page-id-98) .grecaptcha-badge {
    display: none;
}

Make sure that your body section will like this:

<body>

Change it so that it looks like this:

 <body <?php body_class(); ?>>

Cretic

Please the other answers, display none disables the spam checking. – Curious

@Curious what is spam checking and how it is related with adding a CSS style? – Westward