Contact forms are amazing for many reasons. They always make sure that the email arrives in your inbox, eliminating the email falling into the spam folder. Especially when the form has ReCaptcha, it helps protect your site from spam.
Below, I will show you step by step how to add ReCaptcha to your Elementor contact form. It’s a little confusing if you don’t know, so I made this as simple as possible for you.
1. Go to your page and edit with elementor
Load up your page in the Elementor page builder.
2. Search “Form”
Search form in the Elementor search box as shown in the image below.
Now drag & drop that form box into your page.
3. Create & add ReCaptcha
Now you need to go to the Google ReCaptcha site and log in. Once you have logged in, you can begin the setup.
For this example, we are using ReCaptcha 2. But it works the same way for both ReCaptcha 2 & 3.
Follow the steps and accept the terms.
4. Copy & paste the keys to Elementor
You will now be brought to the Key page where you can copy your keys.
- Copy & paste the first key
- Open up a new tab and open your WordPress Dashboard
- Hover over Elementor > click “Settings” > then click “Integrations“
- This is where you paste your ReCapctha Keys. Depending on which ReCaptcha you want to use, paste them into the relevant one. If you’re using ReCaptcha 2, then paste it in reCAPTCHA, not reCAPTCHA 3.
5. Go back to your form
Select your contact form box so it opens up the form settings on the left as shown below.
- You want to expand the “Form Fields” drop-down
- Click the “Add Item” button
- Next, you want to select the “Type” drop-down and select your reCAPTCHA settings. For this example, I’m using reCAPTCHA.
Done
Once you have selected your ReCaptcha and placed the item where you want it to be, then you’re done. You can simply style it to suit your contact form and then that’s it.
No Comments