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

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

...

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.