Google reCAPTCHA and DIVI contact form

Preface: For this article it is required that a valid ReCaptcha v3 account has been stored in the contact form settings of DIVI (Spam Protection).

Step 1 - Create Script Blocker

Click the Add New button in the Script Blocker menu.

Set page and search phrase

In the following view you have to select the page where you have embedded the form. Enter et-recaptcha-v3 under search phrases. Then click on the Scan button.

After the scan is finished, click the Next button.

Configure Script Blocker and block JavaScript handles

Now you have to configure the Script Blocker. To do this, enter recaptcha under ID and DIVI reCAPTCHA under Name. Also set the status to ON.

After that click the Create Script Blocker button.

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 this in a moment to set up a functioning Content Blocker in the second step.

Step 2 - Create Content Blocker

Click the Add New button in the Content Blocker menu.

Configure Content Blocker

Now you have to configure the Content Blocker. Enter DIVI reCAPTCHA as name, recaptcha as ID and set the status to ON. Add the following URL as privacy policy: https://policies.google.com/privacy

Now go to the JavaScript section and in the Global field paste the Content Blocker code you previously copied to the clipboard in the Script Blocker. Set the Execute Global code first option to ON.

window.borlabsDiviRecaptchaInit = false;
[500, 1000, 4000].forEach(function(timeout) {
	setTimeout(function() {
    	if(!window.borlabsDiviRecaptchaInit && window.grecaptcha) {
        	grecaptcha.ready(function() {
            	window.borlabsDiviRecaptchaInit = true;
            	window.etCore.api.spam.recaptcha.init();
            	jQuery('.et_pb_contact_submit').prop('disabled', false);
        	});
    	}
	}, timeout);
});

Under HTML, also add the following code to the existing code (starting at line 7).

<div class="_brlbs-content-blocker">
	<div class="_brlbs-default">
    	<p>Click on the button to load content from %%name%%.</p>
    	<p><a class="_brlbs-btn" href="#" data-borlabs-cookie-unblock role="button">Inhalt laden</a></p>
	</div>
</div>
<script>
jQuery(document).ready(function() {
    jQuery('.et_pb_recaptcha_enabled .et_pb_contact_submit').prop('disabled', true);
});
</script>

After that click the Save All Settings button.

Step 3 - Extend page with DIVI contact form

Now go to the page where you included the DIVI contact form and add the shortcode from the previously created Content Blocker below the form.

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