Posted on: October 06, 2022
Written by: Mick Sherry
Hide Google Invisible reCAPTCHA badge with CSS
Here’s how to easily hide Google’s Invisible reCAPTCHA badge with CSS in 2 minutes. Do this the wrong way & it will disable your spam protection.
Add this CSS to your stylesheet to remove the floating badge:
.grecaptcha-badge {
visibility: hidden;
}Jump to instructions for adding the CSS code
- How to hide Google reCAPTCHA badge with CSS (customizer)
- How to hide Google reCAPTCHA badge with CSS (style.css)
- How to hide Google reCAPTCHA badge in Elementor
- Compliance after removing reCAPTCHA logo badge
Remove Google V3 Invisible reCAPTCHA Badge in WordPress using CSS
Method #1: Add the CSS code to your WordPress customizer
1. Log into your WordPress website and navigate to: ‘Appearance’ –> ‘Customize’
2. You should see an item called ‘Additional CSS’ – Select it.
3. Add the CSS code to this area. If you have other styles in here, add our styles to the bottom and click ‘Publish’.
4. Visit the front-end of your site to see if it worked.
Note: If you website has caching enabled using a plugin or CSS minification, you will need to clear the cache and hard refresh your browser (CTRL + F5) to see the changes.
Method #2: Add the CSS code to your style.css file
1. Log into your WordPress website and navigate to: ‘Appearance’ –> ‘Theme File Editor’
2. You should already be in the CSS file by default. Scroll to the bottom of the file.
3. Paste in our styles and click ‘Save’.
4. Visit the front-end of your site to see if it worked.
Note: If you website has caching enabled using a plugin or CSS minification, you will need to clear the cache and hard refresh your browser (CTRL + F5) to see the changes.
Method #3: How to hide Google reCAPTCHA badge in Elementor Page Builder
1. Log into your WordPress website and navigate to: ‘Elementor’ –> ‘Custom Code’.
2. Click ‘Add New’ and name your new code snippet something like ‘Hide Google reCAPTCHA badge CSS’.
3. For the snippet location dropdown option, select <head>.
4. Paste in the following CSS code snippet:
<style> .grecaptcha-badge {visibility: hidden!important;} </style>
It should look something like this in the back-end:
6. Click the blue publish button and then visit the front-end of your site to see if it successfully hid the Google reCAPTCHA badge.
Note: If you website has caching enabled using a plugin or CSS minification, you will need to clear the cache and hard refresh your browser (CTRL + F5) to see the changes.
Do this after you’ve disabled protected by reCAPTCHA
Place this notice on your form to be Google compliant
When you choose to hide the Google Invisible reCAPTCHA V3 badge on your website, Google requests that you reference their service.
You can do this by placing the following snippet at the bottom of your form:
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.For example:
Avoid using the display: none; CSS property to hide the reCAPTCHA logo
Do not use the “display: none;” property to hide the reCAPTCHA logo (badge) because it will completely disable your spam protection.
You must use either “visibility: hidden;” or “opacity: 0;” to keep your spam protection working.
Hope this helped
Found this useful? If you have feedback on how I can improve this guide, please leave a comment below.
If you want to work with me, I am an Australian SEO consultant & web designer on the Gold Coast QLD.
Until next time, thanks for reading.
Hi, Thanks for your tips. I added the code below to my CSS customizer. Captcha badge is hidden on desktop, but remains visible on mobile. Use Genesis theme. Tried various ways, but nothing seems to work. Any suggestions? Many thanks!
.grecaptcha-badge {
visibility: hidden;
}
Hey Steve,
Glad to hear it has worked for you in part. I had a quick look at your site and I can see the issue.
It looks like when you’ve added that code, it appears to be inside of another media query which tells the browser to only apply my code to devices that are 768px in width or more – this would be why the Google recaptcha badge is not hidden mobile devices.
This is what I can see when I check the source of your site:
Go back in to the CSS customizer and make sure your code is not wrapped inside an @media (min-width:768px) { } statement.
If it is, move it outside of it like this:
Hope this helps.
Michael