PageSpeed-Boost durch reCAPTCHA-Optimierung – so geht’s

Wir wollen aber, dass das Formular immer noch verwendet wird, wenn jemand eine Kontaktanfrage ausfüllt oder unseren WEVENTURE-Newsletter abonniert. Deshalb wird eine neue Javascript-Datei erstellt. Der Code wird aktiviert, wenn jemand in das Feld klickt. Das sieht dann wie folgt aus und ruft die Funktion ReCAPTCHA.js auf:

function cf7_defer_recaptcha() {
   wp_enqueue_script('cf7recap', get_template_directory_uri() . '/recaptcha.js', array('jquery'), '1.0');
}
add_action('get_footer', 'cf7_defer_recaptcha');

Super! Fast geschafft! Fast …

Dieser Code ist implementiert, um das ReCAPTACHA-Formular zu laden, damit es richtig funktioniert. Aus Sicherheitsgründen haben wir unseren ReCAPTCHA-Schlüssel nicht angezeigt. Aber wir haben ihn mit „Put your own key here“ markiert. Das ist die Stelle, an dem du deinen Schlüssel einfügst, wenn du diesen Code für deine Website verwendest.

var captchaLoaded = false;

$( document ).ready(function() {

//Load reCAPTCHA script when CF7 form field is focused
$('.wpcf7-form input').on('focus', function() {
// If we have loaded script once already, exit.
if (captchaLoaded)
{
return;
}

// Variable Intialization
console.log('reCAPTCHA script loading.');
var head = document.getElementsByTagName('head')[0];
var recaptchaScript = document.createElement('script');
var cf7script = document.createElement('script');

// Add the recaptcha site key here.
var recaptchaKey = 'PUT YOUR OWN KEY HERE';

// Dynamically add Recaptcha Script
recaptchaScript.type = 'text/javascript';
recaptchaScript.src = 'https://www.google.com/recaptcha/api.js?render=' + recaptchaKey + '&ver=3.0';

// Dynamically add CF7 script
cf7script.type = 'text/javascript';

cf7script.text = "!function(t,e){var n={execute:function(e){t.execute(\"" + recaptchaKey +"\",{action:e}).then(function(e){for(var t=document.getElementsByTagName(\"form\"),n=0;n<t.length;n++)for(var c=t[n].getElementsByTagName(\"input\"),a=0;a<c.length;a++){var o=c[a];if(\"_wpcf7_recaptcha_response\"===o.getAttribute(\"name\")){o.setAttribute(\"value\",e);break}}})},executeOnHomepage:function(){n.execute(e.homepage)},executeOnContactform:function(){n.execute(e.contactform)}};t.ready(n.executeOnHomepage),document.addEventListener(\"change\",n.executeOnContactform,!1),document.addEventListener(\"wpcf7submit\",n.executeOnHomepage,!1)}(grecaptcha,{homepage:\"homepage\",contactform:\"contactform\"});";

// Add Recaptcha Script
head.appendChild(recaptchaScript);

// Add CF7 Script AFTER Recaptcha. Timeout ensures the loading sequence.
setTimeout(function() {
head.appendChild(cf7script);
}, 200);

//Set flag to only load once
captchaLoaded = true;
});
});