How to hide Google reCAPTCHA badge

Added by on in Web Design

Adding Google reCAPTCHA is a great way of cutting down the number of forms you receive through your website from people trying to sell you their SEO services or worse! Since Google reCAPTCHA v3 was released, it also means that you don’t need to have one of those tickboxes on your page confirming you’re not a robot and then try to decide which images do or don’t have traffic lights in them!

The only downside to this is that a badge is displayed in the bottom right corner on every page of your site to show you have Google reCAPTCHA installed. This may not be a problem for most people but if you’ve got other things installed on your site such as a live chat or review widget, that corner can become quite crowded.

Luckily Google will allow you to hide the badge by adding the following line of code to your CSS:

.grecaptcha-badge {visibility: hidden;}

If you do this though, you need to make sure you add the following code to any form on your site that uses Google reCAPTCHA:

This site is protected by reCAPTCHA and the Google <a href="">Privacy Policy</a> and <a href="">Terms of Service</a> apply.

You can see an example of this, see my contact page.

Reference: Google