Elementor Formular with Google reCAPTCHA

In this documentation, we will show you how to use Google reCAPTCHA (Version 3) in the Elementor form using Content Blocker in a GDPR-compliant way. 

Step 1 - Create Script Blocker

In the Borlabs Cookie menu, click Script Blocker and then Add New.

Set page and search phrase

Now you have to select the page where the form is embedded. In our example this is the page Elementor #128. Enter elementor-recaptcha_v3-api as search phrase.

This will ensure that only the URLs we are looking for are found. Then click Scan.

Configure Script Blocker and block JavaScript handles

After your site is scanned and you click Next, you need to set an ID and name for your script blocker. 

For ID you enter emrecaptcha and for name Elementor reCAPTCHA. Set the status to ON.

Now you have to select the appropriate JavaScript handles to be blocked by Script Blocker. For Elementor reCAPTCHA this is only the handle elementor-recaptcha_v3-api. Set the status of both to ON.

Now you can create the Script Blocker.

Copy code for Content Blocker

After the Script Blocker is created, you have to copy the code for the Content Blocker to the clipboard. We will need it in a moment to set up a working Content Blocker in the second step.

Step 2 - Create Content Blocker

Now create the Content Blocker. In Borlabs Cookie, click Content Blocker and Add New.

Configure Content Blocker

Now you have to configure the content blocker. Enter emrecaptcha as the ID and Elementor reCAPTCHA as the name as shown in the image and add the following URL as the privacy policy: https://policies.google.com/privacy?hl=en.

Now go to the JavaScript section and paste into the Global field the Content Blocker code you previously copied to the clipboard in Script Blocker. 

Also, under HTML, you can swap the word "Load content" for "Load Google reCAPTCHA".

Step 3 - Extend page with contact form

Go to the page where the contact form is embedded and paste the Content Blocker shortcode below the shortcode for the contact form.

Replace …block this… with Google reCAPTCHA has been loaded. The form can now be submitted once the button has been pressed.

Elementor reCAPTCHA is now blocked by Borlabs cookie and is loaded only when the visitor presses the button.