# hCaptcha verwenden

> Formspree Docs · Formular- und Projekteinstellungen · 18. November 2025

Der [hCaptcha](https://www.hcaptcha.com/)-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](https://dashboard.hcaptcha.com/overview). 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.

![](/images/zendesk/e141bbe37f7f96f1.png)

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

Rufe nun deine [Konto-Einstellungsseite](https://dashboard.hcaptcha.com/settings/secrets) auf und kopiere dein **Account-level Secret**. Dieser Schlüssel wird verwendet, um dein Formular in den Formspree-Einstellungen zu konfigurieren.

![](/images/zendesk/9274281d3cd60432.png)

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.

![](/images/zendesk/c3e6f81f162896cb.png)

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

![](/images/zendesk/ddde764d9a199de7.png)

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
<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
<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](https://docs.hcaptcha.com/#local-development) (127.0.0.1). Du musst einen Host-Eintrag konfigurieren, um dies zu umgehen, oder einen HTTP-Tunneling-Dienst wie ngrok verwenden.
