Usar reCAPTCHA v3 — Formspree Docs

Introdujimos reCAPTCHA v3 de Google para evitar que tu formulario se use como mecanismo para enviar spam. La versión 3 es la última tecnología de reCAPTCHA invisible de Google. Tus usuarios no necesitan hacer clic en ninguna casilla ni superar ninguna prueba. En su lugar, el script observa su comportamiento de navegación para asegurarse de que parezca humano.

Para empezar, visita la consola de administración de reCAPTCHA. Crea una nueva clave (o usa una existente) y selecciona un reCAPTCHA v3. Agrega tu dominio y luego haz clic en Submit. Se te mostrarán una clave de sitio (site key) y una clave secreta (secret key).

Ahora visita la pestaña de configuración de tu formulario de Formspree y asegúrate de que reCAPTCHA esté habilitado. Aquí puedes pegar la clave secreta de la consola de reCAPTCHA.

El último paso es agregar la site key de reCAPTCHA v3 a tu propio sitio. En una configuración estándar de formulario, puedes agregarla así:

<html>

<head>
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <script>
        function onSubmit() {
            document.getElementById("myForm").submit()
        }
    </script>
</head>

<body>
    <form id="myForm" action="https://formspree.io/f/{form_id}" method="POST">
        <input name="email" type="email">
        <button class="g-recaptcha" data-sitekey="reCAPTCHA_site_key"
            data-callback='onSubmit' data-action='submit'>Submit</button>
    </form>
</body>
</html>

Si quieres hacer algo diferente, la documentación de reCAPTCHA v3 de Google ofrece una explicación detallada sobre las distintas formas de implementar reCAPTCHA. Si usas tu propio campo, buscaremos uno llamado g-recaptcha-response (el nombre predeterminado del campo), ¡así que por favor no lo sobrescribas con otro nombre!

Alternativamente, puedes usar AJAX para enviar tu formulario. Mira el ejemplo a continuación para aprender a enviar formularios con jQuery usando reCAPTCHA v3.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://www.google.com/recaptcha/api.js?render={your-site-key}"></script>
</head>

<body>
    <button onclick="captcha()" class="btn btn-primary">click me</button>
    <script>
      function captcha() {
        grecaptcha.ready(function() {
          grecaptcha.execute('{your-site-key}', {action: 'submit'}).then(function(token) {
              $.ajax({
                url: "https://formspree.io/f/{your-form-id}",
                method: "POST",
                dataType: "json",
                data: {
                  email: "test@email.com",
                  message: "Hello world!",
                  "g-recaptcha-response": token
                },
                success: () => {
                  alert("Done!")
                },
                error: (err) => {
                  alert("Something wrong!", err)
                }
              });
          });
        });
      }
  </script>
<html>