Utiliser hCaptcha — Formspree Docs

Le service de détection de bots hCaptcha est disponible sur Formspree pour protéger vos formulaires. hCaptcha est une alternative à Google reCAPTCHA axée sur la confidentialité, l’accessibilité et la personnalisation.

Pour commencer, rendez-vous sur le tableau de bord hCaptcha. Ajoutez un site (ou utilisez-en un existant), puis ajoutez votre domaine. Des fonctionnalités avancées sont disponibles pour les comptes enterprise, et quelques autres sont gratuites. Configurez selon vos besoins et cliquez sur Save.

Une fois créé, vous pouvez voir la liste des sites disponibles et la clé de site juste en dessous du nom du site.

Copiez la clé de site. Elle servira à configurer votre formulaire HTML.

Accédez ensuite à la page des paramètres de votre compte et copiez votre secret de compte. Cette clé servira à configurer votre formulaire dans les paramètres Formspree.

Avec la clé de site et le secret en main, accédez à l’onglet des paramètres de votre formulaire Formspree et assurez-vous que CAPTCHA est activé.

Cliquez sur Adjust settings et collez votre clé secrète. Cliquez sur Save.

La dernière étape consiste à ajouter hCaptcha à votre formulaire HTML. Vous devez coller votre clé de site dans un composant div. Dans une configuration de formulaire standard, vous pouvez l’ajouter comme suit :

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

Vous pouvez également utiliser AJAX pour soumettre votre formulaire. Consultez l’exemple ci-dessous pour apprendre à soumettre des formulaires avec jQuery en utilisant hCaptcha :

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

Si vous développez en local, sachez que hCaptcha ne peut pas être exécuté sur des applications hébergées sur localhost (127.0.0.1). Vous devrez configurer une entrée d’hôte pour contourner cette limitation, ou utiliser un service de tunneling HTTP comme ngrok.