How to Integrate reCAPTCHA with Elementor

Elementor Pro, the premium version of Elementor, includes a reCAPTCHA integration natively within the theme itself for use in forms. No longer is there a need for an external plugin to prevent spam in the built-in forms. This allows for a more streamlined code structure and one less plugin to worry about causing critical errors.

reCAPTCHA Integration with Elementor

Thankfully this is a simple seven step process that requires a little bit of copying and pasting.

Step One: Login to Admin Dashboard

In order to get this tutorial to work simply login to the backend of the Elementor built site.

Step Two: Navigate to Elementor Settings

Next, on the left hand side of the admin dashboard select Elementor > Settings and wait for the options to load.

Step Three: Select Integrations

A plethora of options should now be available, however the only one of concern is Integrations. Select this option on the left hand side and navigate to reCAPTCHA as the set of options displayed.

Step Four: Login to Google reCAPTCHA v3 Admin Console

Open a new tab and login to the reCAPTCHA v3 Admin Console in order to create the necessary site and secret keys.

Step Five: Create a New reCAPTCHA

Once logged in navigate to the plus icon and then fill in the requested information. This includes a name, whether it is v2 or v3, domain, owners, and terms of service. Version 3 is the latest and uses the image challenges that have become commonplace over the previous word challenges. Go to settings if the keys do not automatically load and expand the reCAPTCHA keys dropdown to reveal the necessary keys.

Step Six: Integrate the reCAPTCHA with Elementor

Now that the keys are displayed to copy, return to the Elementor tab and select the site and secret keys as well as the score threshold. Once the other fields load, paste in the keys in the denoted sections and select save.

Step Seven: Add reCAPTCHA to the Forms

Last, developers need to add in the reCAPTCHA element to the forms in question. Usually this is right before the submit button for convenience. Save the form and now the integration is active on the form.

Conclusion

Native integration within Elementor definitely is helpful to anyone using the built in Elementor forms. reCAPTCHA is an additional call for resources however and there is debate as to its effectiveness that makes one weigh the costs and benefits. Bots are increasingly smarter and this isn’t a one stop solution. Other anti-spam tactics can assist in defeating bots such as the use of a honeypot and other plugins such as Akismet, both of which have articles as well.

Let’s Work Together

Every project starts with an idea, and I want to help your idea come to fruition

2022-07-20T10:15:02-04:00
Go to Top