# Usar hCaptcha

> Formspree Docs · Configuración de formularios y proyectos · 18 de noviembre de 2025

El servicio de detección de bots [hCaptcha](https://www.hcaptcha.com/) 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](https://dashboard.hcaptcha.com/overview). 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.

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

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](https://dashboard.hcaptcha.com/settings/secrets) y copia tu **Account-level Secret**. Esta clave se usará para configurar tu formulario en la configuración de Formspree.

![](/images/zendesk/9274281d3cd60432.png)

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.

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

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

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

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
<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
<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](https://docs.hcaptcha.com/#local-development) (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.
