How to Hide reCAPTCHA Badge from WordPress Website
Why Would You Want to Hide the reCAPTCHA Badge?
While Google's reCAPTCHA serves a valuable purpose (protecting your forms from spam), it's not always the most visually appealing element.
Maybe it clashes with your site's design, or perhaps it gets in the way of important content. Whatever your reason, there are ways to address this issue.
I am here going to show you how to hide it legally or moving it to a suitable place.
Before We Begin: A Note about Google's Terms
Google's reCAPTCHA Terms of Service require that you make it clear to your users that the system is in use. We'll cover how to comply with this rule a bit later in the guide. For now, let's dive into the methods. Click to see guideline.
Method 1: Hide reCaptcha V3 Badge Using a Plugin (The Easiest Way)
If you're not very comfortable with code, the best way to hide the reCAPTCHA badge is with a WordPress plugin. Here's what to do:
1. Search in add new plugin search bar "BadgeShift for ReCaptcha" or download it from here, then install and activate the plugin. Do not forget to refresh the page.
2. Go to Settings> BadgeShift for Recaptcha> Check the Hide Button.
Method 2: Hide reCaptcha V3 Badge Using Custom CSS
If you'd rather do things manually, a tiny bit of CSS code will do the trick:
.grecaptcha-badge {
visibility: hidden!important;
}Caution: While it might be tempting to use "display: none" to hide the reCAPTCHA badge, this actually disables the spam protection itself. According to experts on Stack Overflow, it's best to use "visibility: hidden" or "opacity: 0" to keep the badge hidden while still allowing reCAPTCHA to function properly.
Where to Add the CSS Code
You have a couple of options for adding this CSS to your WordPress website:
1) The WordPress Customizer:
- Navigate to "Appearance" -> "Customize" in your WordPress dashboard.
- Locate the "Additional CSS" section.
- Paste the code snippet there and click "Publish."
2) Your Theme's Stylesheet (style.css):
- You can access this file through "Appearance" -> "Theme Editor".
- Find the
style.cssfile and paste the code at the bottom.
Caution: If your theme updates, these changes might be lost. Consider using a child theme to avoid this.
3) Use A Custom CSS Plugin:
Use a custom CSS plugin to add additional CSS in case you do not have Child theme or Create a Child theme instead.
Learn More: How to create a WordPress Child Theme
Important Considerations: Google's Terms of Service
Remember, Google instructed to be transparent about your use of reCAPTCHA. Hiding the badge is allowed as long as you add a clear disclaimer near your form. Here's an HTML snippet to include:
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.Alternative 1 : Moving the reCaptcha Badge to Left Side (Recommended)
The best option is to move the reCaptcha box left side as most of the time we use right side to put important boxes like Chat icon, Back to top Icon etc.
1. Move ReCAPTCHA Badge Using a Plugin
Download BadgeShift for Recaptcha from WordPress directory install and activate it. The V3 ReCAPTCHA badge will automatically move to bottom left corner.
2. Move ReCAPTCHA Badge Using Custom CSS
For moving the reCAPTCHA box to left side; Just add this CSS code to your preferred location.
/* Move Google reCAPTCHA v3 badge From Right to Left Side */
.grecaptcha-badge {
width: 70px !important;
overflow: hidden !important;
transition: all 0.3s ease !important;
left: -2px !important;
bottom: 20px !important;
}
.grecaptcha-badge:hover {
width: 256px !important;
}Alternative 2: Adjust the reCaptcha Badge Position
What if you don't want to hide the badge completely but wish it were in a less intrusive spot? CSS can help with that, too! Here's how to adjust its position:
1. Adjust Position Using Custom CSS
.grecaptcha-badge {
bottom: 20px;
right: 20px;
}This code moves the badge 20 pixels up from the bottom and 20 pixels from the right edge of your screen. Experiment with different values for 'bottom' and 'right' to find the perfect placement!
1. Adjust Position Using A Plugin
Download BadgeShift for Recaptcha from WordPress directory install and activate it. Then Go to Settings> BadgeShift for Recaptcha> Adjust the values.
Wrapping It Up
Now you have the tools to either hide or reposition that little reCAPTCHA badge! Remember, always prioritize staying in line with Google's terms of service when doing so.
Latest Articles:
