hCaptcha verwenden — Formspree Docs

Der hCaptcha-Bot-Erkennungsdienst ist in Formspree verfügbar, um deine Formulare zu schützen. hCaptcha ist eine Alternative zu Google reCAPTCHA mit Fokus auf Datenschutz, Zugänglichkeit und Anpassbarkeit.

Besuche zum Einstieg das hCaptcha-Dashboard. Füge eine Site hinzu (oder verwende eine vorhandene) und füge dann deine Domain hinzu. Es gibt erweiterte Funktionen für Enterprise und einige weitere, die für kostenlose Konten verfügbar sind. Konfiguriere nach Bedarf und klicke auf Save.

Sobald du sie erstellt hast, siehst du die Liste der verfügbaren Sites und den Site Key direkt unter dem Site-Namen.

Kopiere den Site Key. Dieser Schlüssel wird verwendet, um deinen HTML-Formularcode zu konfigurieren.

Rufe nun deine Konto-Einstellungsseite auf und kopiere dein Account-level Secret. Dieser Schlüssel wird verwendet, um dein Formular in den Formspree-Einstellungen zu konfigurieren.

Sobald du sowohl einen Site Key als auch ein Secret hast, rufe den Einstellungs-Tab deines Formspree-Formulars auf und stelle sicher, dass CAPTCHA aktiviert ist.

Klicke auf Adjust settings und füge deinen Secret Key ein. Klicke auf Save.

Der letzte Schritt besteht darin, hCaptcha zu deinem Formularcode hinzuzufügen. Du musst deinen Site Key in eine div-Komponente einfügen. In einer Standard-Formular-Konfiguration kannst du es so einbinden:

<html>
  <head>
    <title>hCaptcha Demo</title>
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
  </head>
  <body>
    <form action="https://formspree.io/f/{your-form-id}" method="POST">
      <input type="text" name="email" placeholder="Email" />
      <div class="h-captcha" data-sitekey="{your-site-key}"></div>
      <br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Alternativ kannst du AJAX verwenden, um dein Formular abzusenden. Sieh dir das folgende Beispiel an, um zu erfahren, wie du Formulare mit jQuery unter Verwendung von hCaptcha absendest:

<html>
  <head>
    <title>hCaptcha Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
  </head>
  <body>
    <form id="form" method="POST">
      <input type="email" name="email" placeholder="email@example.com" />
      <div class="h-captcha" data-sitekey="{your-site-key}"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
    <script type="text/javascript">
      $("form").submit(function(e){
      e.preventDefault();
      var hcaptchaVal = $('textarea[name=h-captcha-response]').val();

      $.ajax({
        url: 'https://formspree.io/f/{your-form-id}',
        type: "POST",
        dataType: "json",
        data: {"h-captcha-response": hcaptchaVal, "email": $("input[name='email']").val()},
        success: function(data) {
          console.log(data)
        }
      })
     });
    </script>
  </body>
</html>

Wenn du lokal entwickelst, ist es wichtig zu wissen, dass du hCaptcha nicht in Apps ausführen kannst, die auf localhost gehostet werden (127.0.0.1). Du musst einen Host-Eintrag konfigurieren, um dies zu umgehen, oder einen HTTP-Tunneling-Dienst wie ngrok verwenden.