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

Answer 1

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

I'd like to hide the reCAPTCHA v3 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;
}

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

Answer 2

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.

Answer 3

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)

Answer 4

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.

Answer 5

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.

Answer 6

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>