Usar hCaptcha — Formspree Docs

El servicio de detección de bots hCaptcha está disponible en Formspree para proteger tus formularios. hCaptcha es una alternativa a Google reCAPTCHA con un enfoque en la privacidad, la accesibilidad y la personalización.

Para empezar, visita el panel de hCaptcha. Agrega un sitio (o usa uno existente) y luego agrega tu dominio. Hay funciones avanzadas para empresas y algunas otras disponibles para cuentas gratuitas. Configura según sea necesario y haz clic en Save.

Una vez creado, podrás ver la lista de sitios disponibles y la Site key justo debajo del nombre del sitio.

Copia la Site key. Esta clave se usará para configurar el código HTML de tu formulario.

Ahora accede a la página de configuración de tu cuenta y copia tu Account-level Secret. Esta clave se usará para configurar tu formulario en la configuración de Formspree.

Con la Site Key y el Secret en la mano, ve a la pestaña de configuración de tu formulario de Formspree y asegúrate de que CAPTCHA esté habilitado.

Haz clic en Adjust settings y pega tu Secret Key. Haz clic en Save.

El último paso es agregar hCaptcha al código de tu formulario. Debes pegar tu Site key en un componente div. En una configuración estándar de formulario, puedes agregarlo así:

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

Alternativamente, puedes usar AJAX para enviar tu formulario. Mira el ejemplo a continuación para aprender a enviar formularios 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>

Si estás desarrollando localmente, es importante saber que no puedes ejecutar hCaptcha en aplicaciones alojadas en localhost (127.0.0.1). Tendrás que configurar una entrada en el archivo hosts para evitar esto, o usar un servicio de túnel HTTP como ngrok.