# Protéger vos formulaires avec Cloudflare Turnstile

> Formspree Docs · Paramètres du formulaire et du projet · 14 avril 2026

[**Cloudflare Turnstile**](https://www.cloudflare.com/products/turnstile/) est une alternative moderne et respectueuse de la vie privée aux CAPTCHAs. Il détecte les bots sans friction, sans soumettre les utilisateurs à des défis, améliorant ainsi à la fois l'accessibilité et la sécurité des formulaires.

Formspree prend en charge Turnstile nativement — il suffit de configurer vos clés et d'activer le CAPTCHA dans les paramètres de votre formulaire.

## Étape 1 : Créer un site Turnstile

Commencez par vous rendre sur le [**tableau de bord Cloudflare Turnstile**](https://dash.cloudflare.com/login).

Cliquez sur **Add widget** pour créer un nouveau site Turnstile, puis :

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

1.  Saisissez un **nom** pour votre site.
2.  Ajoutez votre **domaine** (par ex. `example.com`) sous _Allowed Domains_. Utilisez [localhost](http://localhost) pour le développement local.
3.  Choisissez le **mode du widget**.

![](/images/zendesk/521525158f0b0557.png)

Enregistrez la configuration. Une fois créé, vous verrez vos nouvelles clés de widget.

![](/images/zendesk/215916e29d42d475.png)

Copiez la **clé de site et la clé secrète** — vous en aurez besoin dans votre formulaire HTML et dans la configuration Formspree.

## Étape 2 : Configurer le CAPTCHA dans Formspree

Accédez à la page des paramètres de votre formulaire dans le [**tableau de bord Formspree**](https://formspree.io/dashboard).

Dans la section **CAPTCHA**, assurez-vous que la protection CAPTCHA est **activée**.

Cliquez sur **Adjust settings**, sélectionnez **Cloudflare Turnstile** et collez votre **clé secrète** dans le champ prévu.

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

Enregistrez vos modifications.

## Étape 3 : Ajouter Turnstile à votre formulaire HTML

Il est maintenant temps d'ajouter Turnstile à votre formulaire. Incluez le **script Turnstile** et votre **clé de site** dans votre code HTML.

Voici un exemple de base :

```html
<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>
```

Lorsqu'un utilisateur soumet le formulaire, le widget Turnstile génère automatiquement un jeton (`cf-turnstile-response`) que Formspree vérifie à l'aide de votre clé secrète.

## Utiliser AJAX (optionnel)

Si vous soumettez votre formulaire via AJAX, vous pouvez inclure manuellement le jeton Turnstile dans votre requête.

Voici un exemple avec du **JavaScript Vanilla** :

```html
<!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>
```

Ou en utilisant l'[API Turnstile](https://developers.cloudflare.com/turnstile/get-started/client-side-rendering/#widget-lifecycle-management) :

```html
<!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>
```
