Usare reCAPTCHA v3 — Formspree Docs

Abbiamo introdotto Google reCAPTCHA v3 per impedire che il tuo modulo venga usato come meccanismo per inviare spam. La versione 3 è la più recente tecnologia reCAPTCHA invisibile di Google. I tuoi utenti non dovrebbero aver bisogno di selezionare caselle o superare test. Lo script invece osserva il loro comportamento di navigazione per assicurarsi che sembri umano.

Per iniziare, visita la console di amministrazione reCAPTCHA. Crea una nuova chiave (o usane una esistente) e seleziona un reCAPTCHA v3. Aggiungi il tuo dominio e poi fai clic su Submit. Ti verranno presentate una site key e una secret key.

Ora visita la scheda delle impostazioni del tuo modulo Formspree e assicurati che reCAPTCHA sia abilitato. Ora puoi incollare qui la secret key dalla console reCAPTCHA.

L’ultimo passaggio consiste nell’aggiungere la site key di reCAPTCHA v3 al tuo sito. In una configurazione standard del modulo, puoi aggiungerla così:

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

Se vuoi fare qualcosa di diverso, la documentazione di Google reCAPTCHA v3 fornisce una spiegazione approfondita dei diversi modi per implementare il reCAPTCHA. Se usi un tuo campo, cercheremo un campo chiamato g-recaptcha-response (il nome predefinito del campo), quindi non sovrascriverlo con un nome diverso!

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