Usare hCaptcha — Formspree Docs

Il servizio di rilevamento bot hCaptcha è disponibile su Formspree per proteggere i tuoi moduli. hCaptcha è un’alternativa a Google reCAPTCHA con un focus su privacy, accessibilità e personalizzazione.

Per iniziare, visita la dashboard di hCaptcha. Aggiungi un sito (o usane uno esistente) e poi aggiungi il tuo dominio. Ci sono funzionalità avanzate per le imprese e alcune altre disponibili per gli account gratuiti. Configura come necessario e fai clic su Save.

Una volta creato, puoi vedere l’elenco dei siti disponibili e la Site key appena sotto il nome del sito.

Copia la Site key. Questa chiave verrà usata per configurare il codice del tuo modulo HTML.

Ora accedi alla pagina delle impostazioni del tuo account e copia il tuo Account-level Secret. Questa chiave verrà usata per configurare il tuo modulo nelle impostazioni di Formspree.

Con sia una Site Key sia un Secret in mano, visita la scheda delle impostazioni del tuo modulo Formspree e assicurati che il CAPTCHA sia abilitato.

Fai clic su Adjust settings e incolla la tua Secret Key. Fai clic su Save.

L’ultimo passaggio consiste nell’aggiungere hCaptcha al codice del tuo modulo. Devi incollare la tua Site key in un componente div. In una configurazione standard del modulo, puoi aggiungerlo così:

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

In alternativa, puoi usare AJAX per inviare il tuo modulo. Guarda l’esempio qui sotto per scoprire come inviare moduli con jQuery usando 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>

Se stai sviluppando in locale, è importante sapere che non puoi eseguire hCaptcha su app ospitate su local host (127.0.0.1). Dovrai configurare una voce host per aggirare il problema, oppure usare un servizio di tunneling HTTP come ngrok.