reCAPTCHA v3 verwenden — Formspree Docs

Wir haben Google reCAPTCHA v3 eingeführt, um zu verhindern, dass dein Formular als Mechanismus zur Verbreitung von Spam missbraucht wird. Version 3 ist die neueste unsichtbare reCAPTCHA-Technologie von Google. Deine Nutzer müssen keine Kästchen anklicken oder Tests bestehen. Stattdessen beobachtet das Skript ihr Surfverhalten, um sicherzustellen, dass es menschlich erscheint.

Besuche zum Einstieg die reCAPTCHA-Admin-Konsole. Erstelle einen neuen Schlüssel (oder verwende einen vorhandenen) und wähle ein v3-reCAPTCHA aus. Füge deine Domain hinzu und klicke dann auf Submit. Dir werden ein Site Key und ein Secret Key angezeigt.

Besuche nun den Einstellungs-Tab deines Formspree-Formulars und stelle sicher, dass reCAPTCHA aktiviert ist. Du kannst nun den Secret Key aus der reCAPTCHA-Konsole hier einfügen.

Der letzte Schritt besteht darin, den reCAPTCHA-v3-Site Key zu deiner eigenen Website hinzuzufügen. In einer Standard-Formular-Konfiguration kannst du ihn so einbinden:

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

Wenn du etwas anderes umsetzen möchtest, bietet die Google-reCAPTCHA-v3-Dokumentation eine ausführliche Erklärung der verschiedenen Möglichkeiten, das reCAPTCHA zu implementieren. Wenn du dein eigenes Feld verwendest, suchen wir nach einem Feld mit dem Namen g-recaptcha-response (der Standardname des Felds), also überschreibe ihn bitte nicht mit einem anderen Namen!

Alternativ kannst du AJAX verwenden, um dein Formular abzusenden. Sieh dir das folgende Beispiel an, um zu erfahren, wie du Formulare mit jQuery unter Verwendung von reCAPTCHA v3 absendest.

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