With the Google reCaptcha V3 spam can be avoided. However, the badge that is displayed in the contact form is not always a visual highlight. How you can remove this badge and what is allowed, I show you in this article.
What is Google reCaptcha?
The Google reCaptcha is a script provided by Google, which offers you a spam protection for e.g. contact forms in your website.
You still know the „old“ spam protection in the form of a few characters that you see on a picture and then have to enter in a field. In the newer V3 this is obsolete. This has the advantage that the user is relieved of the hurdle of laboriously filling out the spam protection – this leads to better conversion of the form. The reCaptcha V3 is invisible – well, more or less. Instead, a rather large badge is displayed, which you are not allowed to shrink easily. But there is a way to hide it – what you have to do instead, I show below.
Installation of the Google Captcha
The setup is very simple. Just create your website key and public key here, which you will need to configure. Here you will find a documentation how to implement it in your website. Below I will show you how to implement it in WordPress and Elementor.
Installation in WordPress
There are different ways to integrate Google reCaptcha into your WordPress site. Depending on which plugin you use for your form, Google reCaptcha can be integrated.
ContactForm7
If you use the plugin ContactForm7, for example, then you will find the Google reCaptcha settings in the menu under „Contact -> Integrations“ after installing the plugin. By clicking on „Setup reCaptcha“ you can enter your website key and private key that you have created before.
NinjaForms
With Ninja Forms it works similarly. In the latest version there is an option under „Forms->ReCaptcha“ to enter your website key and private key. In your form fields you will now see a field reCaptcha, which you can include.
Elementor Form Widget
If you use Elementor Pro for your website, you can build your form with the „Forms Widget“. At the end of your form, simply add another field and select „reCaptcha V3“. In the field settings you can select the position of the badge.
In order for spam protection to work, you need to enter your website and private key in the dashboard under Elementor->Settings and then in the „Integrations“ tab.
You should now see the reCaptcha badge on the page where you have your form.
So how do you remove the reCaptcha badge?
The badge, which is automatically displayed with the installation of Google reCaptcha, does not look very nice in the form. Yes, according to Google’s FAQs you are allowed to hide the badge. However, you have to include the following text with links to privacy instead:
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.
It’s best to include this text at the bottom of your form. In WordPress, most form plugins have a field with the option „Html“. Then you only have to copy the code described above into it.
To hide the badge, you have to add the following CSS code:
.grecaptcha-badge { visibility: hidden; }
On wordpress, you can either put that in the css file of your child theme or just add it via Design->Customizer and then click on „add additional CSS“.
In Elementor this works via the page settings – there you can add additional CSS code.
And now the badge is hidden!
4 Responses
Hiding is not removing….
You’re right! But this is the only legal official allowed option by Google
I also recommend using this css for hiding the recaptcha field completely as this snippet you mention only removes the content inside of the field in elementor.
.elementor-field-type-recaptcha_v3{
visibility: hidden;
position: absolute;
bottom:-1000px;
left:-1000px;
overflow: hidden;
}
This will target the elementor recaptcha form field, remove it, and also place the field out of screen with no overflow so it doesn’t break the layout. This way, your fields underneath won’t be affected by the hidden positioning.
yes, that’s correct. Also a nice solution!