Do you use Contact Form 7 on your WordPress website but have not installed anti-spam protection? It is essential to implement spam protection to your website before it is too late since nobody wants to waste their valuable time constantly removing undesirable spam emails and comments. This article explains how to use Contact Form 7 with the reCAPTCHA v3 anti-spam plugin.
Anti-spam defence is necessary because:
- Spam comments can have a detrimental impact on your SEO score
- it improves the website’s quality and appearance and the user experience
- without the hassle of manually removing spam comments and emails
In order to block spam on your website, we will be using the following:
- Contact Form 7 (Free WordPress plugin)
- reCAPTCHA v3 Admin Console (Google account required)
Note: I won’t go into how to make a contact form this time because I’m going to presume you already have one established with Contact Form 7. Please read my blog here on how to use Contact Form 7 to create a simple contact form.
What is reCAPTCHA v3?
Google provides the free service known as reCAPTCHA to shield your website from harmful attacks like spam.
Your comment area and contact form are shielded from spam and abuse if you enable this service. The most recent reCAPTCHA version is 3. You can read the article here to learn more about the variations between the versions.
v3 is defined as below:
Newest API that helps you detect abusive traffic on your website without user interaction. Instead of showing a CAPTCHA challenge, reCAPTCHA v3 returns a score so you can choose the most appropriate action for your website.
Source: https://developers.google.com/search/blog/2018/10/introducing-recaptcha-v3-new-way-to
- QWhy reCAPTCHA but not Akismet?
- A
For many users using WordPress, an anti-spam plugin called Akismet may be more popular than reCAPTCHA as it is included by default on a WordPress installation. However, I’m using Google reCAPTCHA instead since the free version of Akismet has restrictions not allowing ads, including AdSense, on the website.
[Click to View]
What is Contact Form 7?
A free WordPress plugin called Contact Form 7 enables you to add a straightforward yet powerful form to your website. With the form’s support for reCAPTCHA v3, your form is more protected against spam emails and other malicious attacks. Moreover, Contact Form 7 enables the inclusion of reCAPTCHA throughout the website, not just on the page where the contact form is located.
How to add reCAPTCHA v3?
- Step1Go to reCAPTCHA v3Console website
- Go to Google reCAPTCHA
- Click v3 Admin Console on top
- Step2Complete reCAPTCHA v3 Admin Console registration
- Label: Enter any name to identify your site
- reCAPTCHA type: Choose reCAPTCHA v3
- Domain: Enter your domain
- Terms of Service: Check the box
- Send alerts to owners: Check the box
- Click SUBMIT to complete the registration
[Click to View] - Step3Copy Site Key & Secret Key
After completing registration, an image similar to the one below containing your site key and secret key for your reCAPTCHA v3 will appear. Keep this page open for the next step. If you close this window and need to check the keys again, please check the setting.
[Click to View] - Step3Go to WordPress Dashboard and setup integration
- Go to WordPress Dashboard
- Click Integration under Contact (Setting for Contact Form 7)
- Under reCAPTCHA, click Setup Integration
- Enter Site Key and Secret Key from your v3 Admin Console and click Save Changes
[Click to View] - Done!Verify the reCAPTCHA badge displayed on your website
The configuration of reCAPTCHA v3 is finished once the integration with keys has been set up, and you should be able to view it on the right bottom of your page.
[Click to View]
You can locate your Site Key and Secret Key in your v3 Admin Console if you need to double-check them (Settings). View the picture below.
Customization of reCAPTCHA v3
Below are some codes for you to customize the look of your reCAPTCHA v3.
Adjusting the height of the badge
Some people might need to adjust the badge’s height so that it doesn’t encroach on the scroll-up button. When necessary, include it in your CSS.
.grecaptcha-badge { bottom: 80px!important; }
Hiding the reCAPTCHA badge (AND adding the text)
According to Google, it is allowed to hide the badge as long as the text showing the reCAPTCHA branding is displayed (source).
To hide the badge, add the below code to your CSS:
.grecaptcha-badge { visibility: hidden; }If you made your badge invisible, you must add the following text to show the reCAPTCHA branding. The Contact Page or your footer area are the simplest and most practical places to do this. The following is the HTML code:
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.Final thought
For those looking for quick, easy, and efficient anti-spam protection for their websites, reCAPTCHA v3 is a wonderful option. If you already use Contact Form 7, it is quite straightforward to add it right away because it supports analytics work in the background of sites in addition to providing form verification. In addition, v3 is even more recommended if you have ads on your website as this service does not restrict having ads when using the service, unlike the free version of Akismet.
Comments
I’m curious to find out what blog system you have been utilizing?
I’m experiencing some minor security issues with my latest blog
and I’d like to find something more risk-free.
Do you have any suggestions?
my web blog … Arztkittel
I’m not an expert on the security but I use Wordfence plugin (WordPress plugin) for my blog.