How to hide the Google Invisible reCAPTCHA badge
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.
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;
}
Do not use display: none;
as it appears to disable the spam checking (thanks @Zade)
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>