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

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;
}

Answer 2

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>

Answer 3

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.