How to Use reCAPTCHA for Your Divi Contact Form Module

Contact forms are one of the most popular forms that bots use to send you spam. Google’s reCAPTCHA is one of the best tools available to reduce that spam. Fortunately, Divi’s Contact Form Module integrates perfectly with reCAPTCHA. In this post, we’ll see how to use reCAPTCHA for your Divi Contact Form Module. We’ll see how to set up the reCAPTCHA account and how to use it with the Contact Form Module.

Let’s get started.

Enable ReCAPTCHA for Your Divi Contact Form Module

First, let’s see how to enable reCAPTCHA for your Divi Contact Form Module. The option is built-in, but you’ll need to enable it and then set it up. Fortunately, this isn’t difficult. For our examples, I’m using the Contact page from the free Poke Restaurant Layout Pack that’s available within Divi.

Open the Contact Form Module’s settings by clicking the dark gray gear icon that appears on hover.

In the first tab, General settings, scroll down to Spam Protection. You’ll see two options that you can enable:

• Use a Spam Protection Service
• Use Basic Captcha

The spam protection service requires setup, while the Basic Captcha works out of the box. Even though it requires set-up, the spam protection service is the one I’d recommend for most Divi users. Let’s take a closer look to see why.

reCAPTCHA vs Basic Captcha

While both options provide spam protection, they are very different in how they work and interact with users. Let’s see what each does and how they compare.

Basic Captcha

Basic Captcha provides a simple math equation and a box to enter the answer. This adds an extra step that users have to contend with before submitting a message. Some users will skip the form and move on. Also, while it does help reduce spam, it’s not 100% bot-proof and you’ll probably still get a lot of spam.

It is simple to set up and use, and it’s commonly used across the web, so users know how to use it. It’s a good option, especially if you don’t have a lot of users. If you want better protection and a better user experience, reCAPTCHA is a better option.

reCAPTCHA

reCAPTCHA is Google’s service. It’s been refined for over a decade to spot spam bots. It doesn’t require users to interact with a separate element within the form to prove they’re human. Instead, it uses data from adaptive risk-based algorithms to determine whether or not a visitor is a real person or a bot.

The visitor is scored based on that data. If they have a passing score, their form is submitted. If they don’t have a passing score, they’ll see a message that a bot has been detected. The score can be adjusted to increase or reduce the sensitivity.

Users won’t have to do anything to interact with the spam protection, so they won’t be affected by it. The form itself looks normal, but you’ll see an icon in the lower right corner of the screen to show the form is protected by reCAPTCHA. The icon expands on hover to show more information and provide links.

Google’s reCAPTCHA service is available to use for free for up to 1 million assessments per month. Google also has an enterprise version available with higher precision and customization options.

Use a Spam Protection Service

Now, let’s see how to use reCAPTCHA with your Divi Contact Form Module. First, enable Use a Spam Protection Service.

This opens a new set of options where you can select the service provider, choose the account, and set the minimum score. Let’s take a closer look at each setting.

Service Provider

This lists all the service providers you’ve integrated. Simply select the provider you want. If you haven’t integrated any providers, it will only show the default, reCAPTCHA. In our case, reCAPTCHA is the provider we want, so we don’t have to make any changes to the service provider.

reCAPTCHA v3 Account

reCAPTCHA v3 Account lets you choose which account you want to use for this captcha. If you don’t have any accounts already set up, you’ll see a large ADD button where you can add the account. We’ll step through this process in the next section.

Minimum Score

The Minimum Score lets you specify the score for good interaction. A score of 0 is usually a bad interaction, such as a bot. Bad interactions see a visual challenge to prove they’re not a bot. A score of 1 is probably a real person, so it’s considered a good interaction. You can finetune the score in increments of .1.

The default setting is 0.5. This is a good place to start. If you’re getting a lot of bots, then adjust the score by .1 until they’re no longer an issue. If you’re hearing complaints that your visitors are seeing a message that says they’re a bot, then lower the score.

How to Setup reCAPTCHA

Let’s step through the process of setting up a reCAPTCHA account and integrating it with your Divi Contact Form Module.

Create Your Account

To create your reCAPTCHA v3 account, go to the reCAPTCHA About page and select the link in the header labeled v3 Admin Console.

Next, you’ll see the screen to create the reCAPTCHA. Add a title, select reCAPTCHA v3, enter your domain, accept the terms of service, and click Submit.

• Label: the title
• reCAPTCHA Type: reCAPTCHA v3
• Domains: your domain
• Accept the terms of service

Adding reCAPTCHA to Your Site

Your reCAPTCHA account will now show your Site Key and Secret Key. You’ll need to copy them and add them to the Contact Form Module one at a time. You’ll also need to paste the name of your reCAPTCHA.

To add your reCAPTCHA account, click the large ADD button under the account selection dropdown box.

Next, paste your Site Name, Site Key, and Secret Key into the fields. Click Submit. If you haven’t already, you can now close the Google reCAPTCHA page. Your reCAPTCHA account is now integrated with your Divi Contact Form Module.

• Site Name: the name of your reCAPTCHA
• Site Key: the key provided by reCAPTCHA
• Secret Key: the key provided by reCAPTCHA

Choose Your Account

Next, select your new account from the reCAPTCHA v3 Account dropdown box.

Minimum Score

If you’ve used reCAPTCHA before and have gotten a lot of spam comments, consider adjusting your Minimum Score. I recommend starting with the default setting and adjusting as needed. Close your Divi Contact Form Module’s settings and save your work. Be sure to test your contact form.

• Minimum Score: 0.5

Test Your Contact Form

Next, test your contact form to make sure it’s working correctly. You’ll see an icon in the bottom right corner that informs the user the form is protected by reCAPTCHA. A visitor with a good score will be able to submit their message as normal.

For this example, I’ve set the score too high, and it sees everyone as a bot. I’ve set this one to a Minimum Score of 1. I then adjusted the score down to 0.8 and I was able to submit the contact form. Here’s how the form looks with the score set too high.

Ending Thoughts

That’s our look at how to use reCAPTCHA for your Divi Contact Form Module. reCAPTCHA v3 is a better option than Basic Captcha. Both provide good spam protection, and the Contact Form Module gives you the option to use either one, but reCAPTCHA is the best option for improved UX and it’s more thorough. It’s not perfect, so you still might see some spam comments, or your visitors might become blocked from using your contact form. Fortunately, the Contact Form Module does have an adjustment that gives you control over reCAPTCHA’s sensitivity.

We want to hear from you. Do you use reCAPTCHA with your Divi Contact Form Module? Let us know about your experience in the comments.