Deine Formulare mit Cloudflare Turnstile schützen

Cloudflare Turnstile ist eine moderne, datenschutzorientierte Alternative zu CAPTCHAs. Es bietet reibungslose Bot-Erkennung ohne Nutzer-Challenges und verbessert sowohl die Zugänglichkeit als auch die Formularsicherheit.

Formspree unterstützt Turnstile von Haus aus – konfiguriere einfach deine Schlüssel und aktiviere CAPTCHA in deinen Formular-Einstellungen.

Schritt 1: Eine Turnstile-Site erstellen

Besuche zunächst das Cloudflare-Turnstile-Dashboard.

Klicke auf Add widget, um eine neue Turnstile-Site zu erstellen, und dann:

Gib einen Namen für deine Site ein.
Füge deine Domain (z. B. example.com) unter Allowed Domains hinzu. Verwende localhost zu Entwicklungszwecken.
Wähle den Widget-Modus.

Speichere die Konfiguration. Sobald sie erstellt ist, siehst du deine neuen Widget-Schlüssel.

Kopiere diesen Site Key und Secret Key – du verwendest sie in deinem HTML-Formular und in der Formspree-Konfiguration.

Schritt 2: CAPTCHA in Formspree konfigurieren

Gehe zur Einstellungsseite deines Formulars im Formspree-Dashboard.

Stelle im Abschnitt CAPTCHA sicher, dass der CAPTCHA-Schutz aktiviert ist.

Klicke auf Adjust settings, wähle Cloudflare Turnstile und füge deinen Secret Key in das vorgesehene Feld ein.

Speichere deine Änderungen.

Schritt 3: Turnstile zu deinem Formular-HTML hinzufügen

Jetzt ist es an der Zeit, Turnstile zu deinem Formular hinzuzufügen. Binde das Turnstile-Skript und deinen Site Key in deinen HTML-Code ein.

Hier ein einfaches Beispiel:

<html>
  <head>
    <title>Turnstile Demo</title>
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
  </head>
  <body>
    <form action="https://formspree.io/f/{your-form-id}" method="POST">
      <input type="email" name="email" placeholder="Email" required />
      <div class="cf-turnstile" data-sitekey="{your-site-key}"></div>
      <br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Wenn ein Nutzer das Formular absendet, generiert das Turnstile-Widget automatisch ein Token (cf-turnstile-response), das von Formspree mit deinem Secret Key verifiziert wird.

AJAX verwenden (Optional)

Wenn du dein Formular über AJAX absendest, kannst du das Turnstile-Token manuell in deine Anfrage einbinden.

Unten findest du ein Beispiel mit Vanilla JS:

<!DOCTYPE html>
<html>
  <head>
    <title>Turnstile AJAX Demo</title>
    <!-- Turnstile script -->
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
  </head>
  <body>
    <form id="form" method="POST" action="https://formspree.io/f/<form-hashid>">
      <input type="email" name="email" placeholder="email@example.com" required />

      <!-- Turnstile widget (automatically adds hidden cf-turnstile-response input) -->
      <div class="cf-turnstile" data-sitekey="{site-key}"></div>

      <br />
      <button type="submit">Submit</button>
    </form>

    <script>
      const form = document.getElementById("form");

      form.addEventListener("submit", function (event) {
        event.preventDefault();

        // Grab all form fields, including the hidden cf-turnstile-response
        const data = new FormData(form);

        fetch(form.action, {
          method: form.method,
          body: data,
          headers: {
            "Accept": "application/json"
          }
        })
          .then(function (response) {
            return response.json();
          })
          .then(function (data) {
            console.log("Formspree response:", data);
          })
          .catch(function (error) {
            console.error("Error:", error);
          });
      });
    </script>
  </body>
</html>

Oder mit der Turnstile-API

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <script
    src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"
    defer
  ></script>
</head>
<body>
  <form id="contact-form">
    <input type="email" name="email" placeholder="Email" required />
    <div id="turnstile-container"></div>
    <button type="submit">Send</button>
  </form>

  <script>
    let widgetId = null;

    // Render widget when the page finishes loading
    window.onload = function () {
      if (!window.turnstile) {
        console.error("Turnstile did not load.");
        return;
      }

      widgetId = window.turnstile.render("#turnstile-container", {
        sitekey: "{your-site-key}",
        callback: function (token) {
          console.log("Turnstile success:", token);
        }
      });
    };

    // AJAX submit
    document.getElementById("contact-form").addEventListener("submit", function (event) {
      event.preventDefault();
      const form = this;
      const formData = new FormData(form);

      // Ensure we send the token under the standard field name
      // If Turnstile already added a hidden input, this overwrites it.
      formData.set("cf-turnstile-response", token);

      fetch("/submit", {
        method: "POST",
        body: formData
      })
        .then((res) => {
          if (!res.ok) {
            throw new Error("Server error: " + res.status);
          }
          return res.text();
        })
        .then((text) => {
          alert("Server replied: " + text);
          // Reset for next submission
          window.turnstile.reset(widgetId);
          form.reset();
        })
        .catch((err) => {
          console.error(err);
          alert("Request failed: " + err.message);
        });
    });
  </script>
</body>
</html>