Informationen #
Google reCAPTCHA ist eine Lösung, um Kontaktformulare „Spam-Sicher“ zu versenden. In der Version 3 geschieht dies ohne zusätzliche Eingabe, wie z.B. die Checkbox „Ich bin kein Roboter“, sondern erkennt am Verhalten des Benutzers, ob ein Spamverdacht vorliegt oder nicht. Über einen Score-Wert (Standard: 0,5) in den Einstellungen wird die Empfindlichkeit des Tools eingestellt.
Da das Tool von Google stammt und personenbezogene Daten ausgetauscht werden, muss eine aktive Einwilligung über das Cookie Consent Tool erfolgen. Dazu gibt es leider keinen Standard-Blocker, da jedes Kontaktformular ein eigenes Script verwendet. Aus diesem Grund muss der Content-Blocker in wenigen Schritten per Hand eingerichtet werden. Für eine DSGVO konforme Nutzung ist dieser Schritt allerdings zwingend nötig.
Google reCAPTCHA einrichten #
Die Einrichtung des Tools erfolgt in drei Schritten:
1. Grundeinrichtung bei Google #
Zuerst logt man sich mit seinen Google Zugangsdaten in die Seite https://www.google.com/recaptcha/about/ ein. Über den Punkt „v3 Admin Console“ in der Navigation gelangt man zur Grundeinrichtung, in der nur wenige Daten erfasst werden und die Nutzungsbedingungen akzeptiert werden müssen. Ist dies geschehen, erhält man auf der folgenden Seite die beiden Keys, die für die Installation in WordPress nötig sind, den Website-Schlüssel und den Geheimen Schlüssel.
2. Grundeinrichtung in Elementor #
Anschließend logt man sich ins Backend der WordPress Seite ein und wählt unter Elementor > Einstellungen den Punkt „Integration“ aus. Hier werden die beiden vor erstellten Schlüssel eingetragen. Bitte darauf achten, dass dies unter „reCAPTCHA V3“ erfolgt. Der Score-Threshold-Wert kann so übernommen werden.
Sollte in einem Projekt noch „ContactForm7“ oder „Ninja Forms“ installiert sein, können die Schlüssel auf ähnlichem Weg in die Tools integriert werden.
3. Aktivierung im Kontaktformular #
Geht zum Abschluss der Grundeinrichtung zum jeweiligen Kontaktformular und fügt ein neues Feld „reCAPTCHA V3“ am Ende der Formularfelder hinzu. Speichert die Seite ab und ihr werdet jetzt unten rechts ein quadratisches Hinweisfenster zum reCAPTCHA finden. Damit ist das Tool aktiviert.
Falls mehrer Formulare auf anderen Seiten genutzt werden, muss dieser Schritt entsprechend wiederholt werden.
Google reCAPTCHA mit Borlabs Cookies blocken #
1. Script Blocker nutzen #
Um jetzt das Google reCAPTCHA an der automatischen Aktivierung beim Aufrufen der Seite zu hindern, muss das entsprechende Script geblockt werden. Das gute daran ist, dass Borlabs Cookie automatisch nach Scripten sucht. Nutzt man beispielsweise Elementor und ContactForm7 gemeinsam auf einer Seite, werden beide Scripte gefunden und für das Blocken ausgewählt.
Wichtig: Ihr müsst Google reCAPTCHA bereits eingerichtet und in mindestens einem Elementor Kontaktformularen eingebunden haben, um jetzt weiterzumachen.
Eine genaue Anleitung dazu, findet Ihr unter https://de.borlabs.io/kb/elementor-formular-mit-google-recaptcha/
2. Shortcode einbauen #
Nachdem Ihr den Script Blocker und den Content Blocker eingerichtet habt, erhaltet Ihr einen Shortcode, wie z.B.
[borlabs-cookie id=“emrecaptcha“ type=“content-blocker“]…blockiere das…[/borlabs-cookie]
, den Ihr idealerweise direkt über dem Kontaktformular in die Seiten einbindet. Bitte ändert den Teil „…blockiere das…“ im Shortcode mit dem Text „Google reCAPTCHA wurde geladen. Das Formular kann jetzt versendet werden.„.
Jetzt wird jedes Formular, vor dem dieser Shortcode eingebunden wurde, mit einem Content-Blocker-Hinweis ausgestattet, der um eine Zustimmung zur reCATCHA Nutzung bittet. Wird dieser akzeptiert, erscheint unten rechts das oben erwähnte quadratische Hinweisfenster und das Tool wurde aktiviert.
ALTE VERSION #
Ursprünglich für Contact Form 7 geschrieben und mit einem Zusatzcode für Elementor Forms erweiterbar. Ist jetzt aber nicht mehr nötig, da es, wie oben beschrieben, eine direkte Blockfunktion gibt.
Google reCAPTCHA mit Borlabs Cookies blocken #
1. Script Blocker nutzen #
Um jetzt das Google reCAPTCHA an der automatischen Aktivierung beim Aufrufen der Seite zu hindern, muss das entsprechende Script geblockt werden. Das gute daran ist, dass Borlabs Cookie automatisch nach Scripten sucht. Nutzt man beispielsweise Elementor und ContactForm7 gemeinsam auf einer Seite, werden beide Scripte gefunden und für das Blocken ausgewählt.
Wichtig: Ihr müsst Google reCAPTCHA bereits eingerichtet und in den Kontaktformularen eingebunden haben, um jetzt weiterzumachen.
Eine genaue Anleitung dazu, findet Ihr unter https://de.borlabs.io/kb/google-recaptcha-und-contact-form-7/
Diese Anleitung wurde zwar für den Einsatz von ContactForm7 verfasst, es funktioniert aber genauso mit Elementor.
Die einzige Änderung, die Ihr vornehmen müsst:
– Der Code, der unter „JavaScript Code für das Feld Initialisierung“ steht, wird so nicht funktionieren.
Der funktionierende Code lautet:
!(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){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)},])
In der Regel warnt die Wordfence Firewall nach dem Hinzufügen des Script Blockers vor einem unbekannten Zugriff. Dies muss dann bestätigt und die Seite neu geladen werden.
2. Shortcode einbauen #
Nachdem Ihr den Script Blocker und den Content Blocker eingerichtet habt, erhaltet Ihr einen Shortcode, wie z.B.
[borlabs-cookie id="recaptcha" type="content-blocker"]...blockiere das...[/borlabs-cookie]
, den Ihr idealerweise direkt über dem Kontaktformular in die Seiten einbindet. Bitte ändert den Teil „…blockiere das…“ im Shortcode mit dem Text „Google reCAPTCHA wurde geladen. Das Formular kann jetzt versendet werden.“.
Jetzt wird jedes Formular, vor dem dieser Shortcode eingebunden wurde, mit einem Content-Blocker-Hinweis ausgestattet, der um eine Zustimmung zur reCATCHA Nutzung bittet. Wird dieser akzeptiert, erscheint unten rechts das oben erwähnte quadratische Hinweisfenster und das Tool wurde aktiviert.