Utiliser reCAPTCHA v3 — Formspree Docs

Nous avons intégré Google reCAPTCHA v3 pour empêcher que votre formulaire ne soit utilisé pour envoyer du spam. La version 3 est la dernière technologie reCAPTCHA invisible de Google. Vos utilisateurs n’ont pas besoin de cocher de cases ni de passer des tests. Le script observe leur comportement de navigation pour s’assurer qu’il ressemble à celui d’un humain.

Pour commencer, consultez la console d’administration reCAPTCHA. Créez une nouvelle clé (ou utilisez-en une existante) et sélectionnez un reCAPTCHA v3. Ajoutez votre domaine, puis cliquez sur Submit. Vous obtiendrez une clé de site et une clé secrète.

Accédez ensuite à l’onglet des paramètres de votre formulaire Formspree et assurez-vous que reCAPTCHA est activé. Vous pouvez alors coller la clé secrète provenant de la console reCAPTCHA.

La dernière étape consiste à ajouter la clé de site reCAPTCHA v3 à votre propre site. Dans une configuration de formulaire standard, vous pouvez l’ajouter comme suit :

<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 vous souhaitez une autre approche, la documentation Google reCAPTCHA v3 propose une explication détaillée des différentes façons d’implémenter reCAPTCHA. Si vous utilisez votre propre champ, nous rechercherons un champ nommé g-recaptcha-response (le nom par défaut du champ) — veillez à ne pas le renommer !

Vous pouvez également utiliser AJAX pour soumettre votre formulaire. Consultez l’exemple ci-dessous pour apprendre à soumettre des formulaires avec jQuery en utilisant 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>