Have ever reCAPTCHA Invisible badge annoyed you? Specially when you are using a mobile device with a responsive theme and the badge slides out from the right hiding some of your important form control? Say, the form Submit button? - disgusting situation.
![[Image: F8oS0.png]](https://i.ibb.co/pR6qS2k/F8oS0.png)
Well, let's hide it.
Wait! OMG! effone gone mad! Thats a straight breach of Google's TOS.
Well, well. Hang on. You can still hide it. Google now allows it under certain conditions (As per latest reCAPTCHA FAQ, 11 Dec, 2018 update).
https://developers.google.com/recaptcha/docs/faq
So, let's hide it. Super easy. Add this CSS at the end of your
Save stylesheet. Refresh!
Eh, the badge is still there sliding out. Because the container is not inline. You have to declare your badge to be inline in order to hide it.
Open template
Change it to:
Yes, the badge is gone!
Now, the most important part to remain legal:
You have to add this line to every page you are using reCAPTCHA in, if you are not sure - add it to footer template:
Note:
![[Image: F8oS0.png]](https://i.ibb.co/pR6qS2k/F8oS0.png)
Well, let's hide it.
Wait! OMG! effone gone mad! Thats a straight breach of Google's TOS.
Google reCAPTCHA v3 TOS Wrote:You agree to explicitly inform visitors to your site that you have implemented the Invisible reCAPTCHA on your site.
Well, well. Hang on. You can still hide it. Google now allows it under certain conditions (As per latest reCAPTCHA FAQ, 11 Dec, 2018 update).
https://developers.google.com/recaptcha/docs/faq
So, let's hide it. Super easy. Add this CSS at the end of your
global.css
:.grecaptcha-badge {
display: none;
}
Save stylesheet. Refresh!
Eh, the badge is still there sliding out. Because the container is not inline. You have to declare your badge to be inline in order to hide it.
Open template
member_register_regimage_recaptcha_invisible
and find this chunk:grecaptcha.render(target.get(0), {
'sitekey': '{$public_key}',
'callback': captchaOnSubmit
}, true);
Change it to:
grecaptcha.render(target.get(0), {
'sitekey': '{$public_key}',
'callback': captchaOnSubmit,
'badge' :'inline'
}, true);
Yes, the badge is gone!
Now, the most important part to remain legal:
You have to add this line to every page you are using reCAPTCHA in, if you are not sure - add it to footer template:
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.
Note:
- This is demonstrated for registration page but is applicable to anywhere you are using reCAPTCHA.
- Some additional requirement/s of Google Brand guidelines: "Don't mimic Google's typographic style. The writeup should blend your site's typography.