Mit dem Google reCaptcha V3 lässt sich Spam vermeiden. Jedoch ist der Badge, den man damit im Kontaktformular angezeigt bekommt, nicht immer ein optisches Highlight. Wie du diesen Badge entfernen kannst und was erlaubt ist, zeige ich dir in diesem Artikel.

Was ist Google reCaptcha?

Das Google reCaptcha ist ein von Google zur Verfügung gestelltes Script, welches dir einen Spamschutz für zB. Kontaktformulare in deiner Webseite bietet.

Man kennt den „alten“ Spamschutz noch in Form von ein paar Zeichen, die man auf einem Bild sieht und dann in ein Feld eingeben muss. In der neueren V3 ist das hinfällig. Das hat den Vorteil, dass dem User die Hürde genommen wird, mühsam den Spamschutz auszufüllen – das führt zu besseren Conversion des Formulars. Das reCaptcha V3 ist so zusagen unsichtbar – naja, mehr oder weniger. Dafür wird ein recht großer Badge angezeigt, den man nicht einfach so verkleinern darf. Es gibt aber eine Möglichkeit, ihn auszublenden – was man stattdessen machen muss, zeige ich weiter unten.

Einbau des Google Captchas

Der Einbau ist relativ einfach. Dafür benötigst du auf jeden Fall den Website-Key und den Private-Key. Diese kannst du ganz einfach HIER anlegen.

Einbau in Html Webseiten oder Web-Applikationen

Hier gibt es eine Anleitung, wie du den Google reCaptche in deine statische Webseite oder in andere Webapplikationen einbauen kannst: Google reCaptcha V3 Dokumentation

Einbau in WordPress

Für den Einbau von Google reCaptcha in deine WordPress-Seite gibt es unterschiedliche Möglichkeiten. Je nachdem, welches Plugin du für dein Formular verwendest, lässt sich Google reCaptcha einbauen.

ContactForm7

Verwendest du zB. das Plugin ContactForm7, dann findest du nach Installation des Plugins im Menü unter „Contact -> Integrations“ die Google reCaptcha Einstellungen. Mit Klick auf „Setup reCaptcha“ kannst du dort deinen Website-Key und Private-Key eingeben, den du zuvor angelegt hast.

NinjaForms

Bei Ninja Forms funktioniert es ähnlich. In der aktuellsten Version gibt es unter „Forms->ReCaptcha“ die Option deinen Website-Key und Private-Key einzugeben. Bei deinen Formularfeldern siehst du nun ein Feld reCaptcha, welches du einbauen kannst.

Elementor Form Widget

Verwendest du für deine Webseite Elementor Pro, dann kannst du mit dem „Forms Widget“ dein Formular aufbauen. Am Ende deines Formulars baust du dann einfach noch ein weiteres Feld ein und wählst dort „reCaptcha V3“ aus. Bei den Feldeinstellungen kannst du noch die Position des Badges auswählen.

Damit der Spamschutz funktioniert, musst du im Dashboard unter Elementor->Settings und dann im Reiter „Integrations“ deinen Website- und Private-Key eingeben.

Du solltest nun den reCaptcha Badge auf der Seite, wo du dein Formular hast sehen.

Wie entfernt man nun den reCaptcha Badge?

Der Badge, welcher mit dem Einbau von Google reCaptcha automatisch angezeigt wird, sieht im Formular nicht besonders schön aus. Ja, laut den FAQs von Google darf man den Badge ausblenden. Man muss jedoch stattdessen folgenden Text mit Links zum Datenschutz einbauen:

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

Am besten du baust diesen Text ganz unten in deinem Formular ein. Bei WordPress gibt es bei den meisten Formular-Plugins ein Feld mit der Option „Html“. Dann musst du nur den oben beschriebenen Code dort hineinkopieren.

Damit nun auch der Badge ausgeblendet wird, musst du noch folgenden CSS Code einbauen:

.grecaptcha-badge { visibility: hidden; }

Bei WordPress kannst du das entweder in das css File deines Child-Themes schreiben oder einfach über Design->Customizer und dann auf „zusätzliches CSS hinzufügen“ einfügen.

In Elementor funktioniert das über die Seiteneinstellungen – dort kannst du zusätzlichen CSS Code hinzufügen.

Und schon wird der Badge ausgeblendet!

Kommentar schreiben