Einen eigenen reCAPTCHA-v2-Schlüssel hinzufügen

Verfügbar in: Allen Tarifen

Manchmal möchtest du die Spam-Schutz-Vorteile eines reCAPTCHA nutzen, aber deine Nutzer nicht auf eine von Formspree gehostete Seite weiterleiten. Du kannst auf der Einstellungsseite deines Formulars einen eigenen reCAPTCHA-Schlüssel angeben und das reCAPTCHA direkt in dein Formular einbetten. Wir verwenden dann deinen reCAPTCHA-Schlüssel bei der Kommunikation mit dem reCAPTCHA-Server, um das clientseitige Token zu authentifizieren.

Besuche zum Einstieg die reCAPTCHA-Admin-Konsole. Erstelle einen neuen Schlüssel (oder verwende einen vorhandenen) und wähle ein v2-reCAPTCHA aus. Füge deine Domain hinzu und klicke dann auf Submit. Dir werden ein Site Key und ein Secret Key angezeigt.

Screen_Shot_2019-09-30_at_10.16.09_AM.png

Besuche nun den Tab Settings deines Formspree-Formulars und stelle sicher, dass CAPTCHA aktiviert ist. Klicke auf „Adjust settings”, wähle unter CAPTCHA-Lösung „Custom reCAPTCHA” und füge deinen eigenen Schlüssel in das vorgesehene Feld ein:

recaptcha v2 guide.png

Der letzte Schritt besteht darin, das reCAPTCHA-Widget zu deiner eigenen Website hinzuzufügen. In einer Standard-Formular-Konfiguration kannst du es so einbinden:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="https://formspree.io/f/{form_id}" method="POST">
      <input type="email" name="email" placeholder="email@example.com" />
      <div class="g-recaptcha" data-sitekey="your_site_key"></div> <!-- replace with your recaptcha SITE key not secret key -->
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Wenn du etwas anderes umsetzen möchtest, bietet die Google-Entwicklerseite für reCAPTCHA eine ausführliche Erklärung der verschiedenen Möglichkeiten, das reCAPTCHA zu implementieren. Wenn du dein eigenes Feld verwendest, suchen wir nach einem Feld mit dem Namen g-recaptcha-response (der Standardname des Felds), also überschreibe ihn bitte nicht mit einem anderen Namen!

Wenn du das reCAPTCHA-Feld zu einem Pflichtfeld machen möchtest, kannst du das mit JavaScript und CSS tun. Das folgende Beispiel sorgt dafür, dass das Feld mithilfe der HTML5-Validierung als Pflichtfeld behandelt wird.

// javascript
window.onload = function() {
  var el = document.getElementById('g-recaptcha-response');
  if (el) {
    el.setAttribute('required', 'required');
  }
}

/* CSS */
#g-recaptcha-response {
  display: block !important;
  position: absolute;
  margin: -50px 0 0 0 !important;
  z-index: -999999;
  opacity: 0;
}