Google reCAPTCHA and Contact Form 7

Preface: This article requires that Contact Form 7 is installed and Google reCAPTCHA is set up.

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 on which the form is embedded. In our example, this is the Contact form page. Enter the word /recaptcha/ for Search phrases. This will ensure that only the URLs we are looking for are found. Then click on Scan.

Configure Script Blocker and block JavaScript handles

After your site has been scanned and you have clicked Next, you need to set an ID and name for your Script Blocker.

For ID you enter recaptcha and for name Google reCAPTCHA. Set the status to ON.

Now you have to select the appropriate JavaScript handles that should be blocked by Script Blocker. For Google reCAPTCHA these are the handles google-recaptcha and wpcf7-recaptcha. 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 Google reCAPTCHA as the name as in the image and add the following URL as the 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 Script Blocker. Set the Execute Global code First option to ON.

Then, in the Initialization field, paste the JavaScript code we provide here.

JavaScript code for the Initialization field

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=3)}([function(e,t){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t,r){var n=r(4),o=r(5),c=r(6),u=r(7);e.exports=function(e){return n(e)||o(e)||c(e)||u()},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t,r){"use strict";r.r(t);var n,o=r(1),c=r.n(o),u=r(2),a=r.n(u);function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}wpcf7_recaptcha=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){a()(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({},null!==(n=wpcf7_recaptcha)&&void 0!==n?n:{});var f=wpcf7_recaptcha.sitekey,p=wpcf7_recaptcha.actions,s=p.homepage,l=p.contactform,d=function(e){var t=e.action,r=e.func,n=e.params;grecaptcha.execute(f,{action:t}).then((function(e){var r=new CustomEvent("wpcf7grecaptchaexecuted",{detail:{action:t,token:e}});document.dispatchEvent(r)})).then((function(){"function"==typeof r&&r.apply(void 0,c()(n))})).catch((function(e){return console.error(e)}))};if(grecaptcha.ready((function(){d({action:s})})),document.addEventListener("change",(function(e){d({action:l})})),"undefined"!=typeof wpcf7&&"function"==typeof wpcf7.submit){var b=wpcf7.submit;wpcf7.submit=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};d({action:l,func:b,params:[e,t]})}}document.addEventListener("wpcf7grecaptchaexecuted",(function(e){document.querySelectorAll('form.wpcf7-form input[name="_wpcf7_recaptcha_response"]').forEach((function(t){t.setAttribute("value",e.detail.token)}))}))},function(e,t,r){var n=r(0);e.exports=function(e){if(Array.isArray(e))return n(e)},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=function(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t,r){var n=r(0);e.exports=function(e,t){if(e){if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(e,t):void 0}},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.default=e.exports,e.exports.__esModule=!0}]);

Now scroll to the Preview Blocked Content field and paste the HTML code provided here.

HTML code for Preview Blocked Content

<div class="_brlbs-content-blocker">
    <div class="_brlbs-default">
        <p>Zum Absenden des Formulars muss Google reCAPTCHA geladen werden.
			<br><a href="%%privacy_policy_url%%" target="_blank" rel="nofollow noopener noreferrer">Google reCAPTCHA privacy policy</a></p>
        <p><a class="_brlbs-btn" href="#" data-borlabs-cookie-unblock role="button">Load Google reCAPTCHA</a></p>
    </div>
</div>

Now you can save the Content Blocker. Then scroll up and copy the shortcode of the Content Blocker.

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.

Google reCAPTCHA is now blocked by Borlabs Cookie and is loaded only when the visitor presses the button.