> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Google reCAPTCHA erst nach Einwilligung laden

> Das Captcha von Google an den Consent-Layer koppeln und Besuchern, die nicht zustimmen, ein Formular mit der WEBSALE-Rechenaufgabe anbieten.

Google reCAPTCHA stellt beim Laden eine Verbindung zu Google her und übermittelt dabei Daten des Besuchers. Deshalb soll es erst geladen werden, wenn der Besucher im Consent-Layer zugestimmt hat.

Ein Formular ohne Captcha ist aber keine Lösung, es wäre sofort das Ziel automatisierter Einsendungen. Wer nicht zustimmt, bekommt deshalb dasselbe Formular mit der WEBSALE-Rechenaufgabe statt des Captchas von Google.

![Recapthadsgvo](https://mintcdn.com/websaleag-44ee7ea6/WL0iv0js7LvH8rHZ/images/recapthadsgvo.png?fit=max\&auto=format\&n=WL0iv0js7LvH8rHZ\&q=85\&s=49344fff4923cc2f2cc9cae9c8a19606)

## Wie die Umschaltung funktioniert

Es gibt zwei Formularkonfigurationen, die sich nur im Captcha unterscheiden. Welche davon geladen wird, entscheidet eine einzige Klammerung im Template.

| Zustimmung | Formularkonfiguration | Captcha |
| - | - | - |
| erteilt | `contact.config` | Google reCAPTCHA |
| nicht erteilt | `contact_ohne_recaptcha.config` | WEBSALE-Rechenaufgabe |

Wegweiser: [Integration eines INQUIRY-Formulars](https://dokumentation.websale.de/v8s/formulare-fuer-kundenanfragen/formulare-fuer-kundenanfragen.md) · AC- (AgreementCookies)

## Schritt 1: Den Eintrag im Consent-Layer anlegen

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<AgreementCookies>
   Allow = yes
   ...
   <+Entry>
      ID             = googleRecaptcha
      Type           = OptIn
      Preselection   = unchecked
      Name           = Google reCAPTCHA
      Descr          = Schützt unsere Formulare vor automatisierten Einsendungen. Beim Laden wird eine Verbindung zu Google hergestellt.
      ConsentGroupID = <Ihre Gruppe>
   </+Entry>
   ...
</AgreementCookies>
```

> [!WARNING]
>
> `Preselection = unchecked` ist nicht verhandelbar. Ein vorab angehaktes Kästchen ist keine Einwilligung, und damit wäre der ganze Aufwand auf dieser Seite vergeblich.

Füllen Sie `Descr` aus. Der Besucher soll entscheiden, und dafür muss er wissen, worüber. Im Beispiel der bisherigen Beschreibung bleibt das Feld leer.

Referenz: [Abschnitt AgreementCookies](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/externe-dienste-und-schnittstellen.md#agreementcookies)

## Schritt 2: Die zweite Formularkonfiguration anlegen

Legen Sie im OSB-Dienst "Konfiguration" im Bereich "Formulare (Inquiry)" eine Kopie Ihrer Formularkonfiguration an, beispielsweise `contact_ohne_recaptcha.config`, und schalten Sie darin das Captcha von Google ab:

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Captcha>
   UseReCaptchaV3       = no
   UseArithmeticCaptcha = yes
   CaptchaDescription   = Eine kleine Rechenaufgabe
   CaptchaNotFilledIn   = Bitte lösen Sie die Rechenaufgabe
   CaptchaError         = Die Rechenaufgabe wurde nicht gelöst
</Captcha>
```

> [!WARNING]
>
> Zwei Konfigurationen bedeuten zwei Dateien, die auseinanderlaufen können. Jede Änderung am Formular, jedes neue Feld und jede neue Empfängeradresse muss in beide. Notieren Sie das an der Stelle, an der die Formulare gepflegt werden.

## Schritt 3: Die passende Konfiguration einbinden

Auf dem Template des Kontaktformulars, beispielsweise `tpl_contact.htm`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{AC-AgreementMadeForID(googleRecaptcha)}
   ~WS-ExternInclude($URL-Homepage$/cgi/inquiry4.cgi?inq4=$WS-ShopID$.$WS-SubShopID$&m=$WS-MallID$&ini=contact.config)~
{/AC-AgreementMadeForID(googleRecaptcha)}

{!AC-AgreementMadeForID(googleRecaptcha)}
   ~WS-ExternInclude($URL-Homepage$/cgi/inquiry4.cgi?inq4=$WS-ShopID$.$WS-SubShopID$&m=$WS-MallID$&ini=contact_ohne_recaptcha.config)~
{/!AC-AgreementMadeForID(googleRecaptcha)}
```

Referenz: [AC-AgreementMadeForID()](https://dokumentation.websale.de/v8s/referenz/tags/ac-agreementcookies.md#ac-agreementmadeforid) · [WS-ExternInclude()](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md)

## Schritt 4: Beide Captcha-Varianten im Formulartemplate

Im Template mit den Formularfeldern, beispielsweise `inquiry_contact.htm`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-Include}

   {AC-AgreementMadeForID(googleRecaptcha)}
      {CAPTCHA-RecaptchaV3Error}~CAPTCHA-RecaptchaV3Error~{/CAPTCHA-RecaptchaV3Error}

      <div id="recaptcha-badge"></div>
      <input type="hidden" name="g_recaptcha_token">

      <script src="~CAPTCHA-RecaptchaV3ApiUrl~?render=explicit&onload=onloadGoogleRecaptchaCallback"></script>
      <script>
         var recaptchaClientId = null;

         function onloadGoogleRecaptchaCallback() {
            recaptchaClientId = grecaptcha.render("recaptcha-badge", {
               "sitekey": "~CAPTCHA-RecaptchaV3SiteKey~",
               "badge": "inline",
               "size": "invisible"
            });
         }

         document.querySelector("form").addEventListener("submit", function (e) {
            if (recaptchaClientId === null) {
               return;
            }
            var token = document.querySelector("[name='g_recaptcha_token']");
            if (token.value !== "") {
               return;
            }
            e.preventDefault();
            var form = this;
            grecaptcha.ready(function () {
               grecaptcha
                  .execute(recaptchaClientId, { action: "~CAPTCHA-RecaptchaV3ActionName~" })
                  .then(function (value) {
                     token.value = value;
                     form.submit();
                  });
            });
         });
      </script>
   {/AC-AgreementMadeForID(googleRecaptcha)}

   {!AC-AgreementMadeForID(googleRecaptcha)}
      <div {CAPTCHA-Input_error}class="fehler"{/CAPTCHA-Input_error}>
         <p>~CAPTCHA-Description~ *</p>
         <label for="~CAPTCHA-Input_name~">
            ~CAPTCHA-ArithmeticOperand1~ ~CAPTCHA-ArithmeticOperation~ ~CAPTCHA-ArithmeticOperand2~ =
         </label>
         <input type="text" id="~CAPTCHA-Input_name~" name="~CAPTCHA-Input_name~"
                value="~CAPTCHA-Input_value~" maxlength="10" inputmode="numeric">
      </div>
   {/!AC-AgreementMadeForID(googleRecaptcha)}

{/WS-Include}
```

> [!WARNING]
>
> **Das Token darf erst beim Absenden geholt werden.**
>
> Ein Token von reCAPTCHA v3 ist nur rund zwei Minuten gültig. Die bisherige Beschreibung holt es unmittelbar beim Laden der Seite. Wer das Formular in Ruhe ausfüllt, sendet dann ein abgelaufenes Token, und die Einsendung wird abgewiesen. Besonders lange Formulare und Besucher, die zwischendurch etwas nachschlagen, sind betroffen.
>
> Das Beispiel oben holt das Token deshalb erst im `submit`-Ereignis und sendet das Formular danach ab.

Die bisherige Beschreibung verwendet an dieser Stelle jQuery. Im Beispiel oben steht stattdessen `document.querySelector`, damit das Formular nicht von einer weiteren Bibliothek abhängt.

Das Eingabefeld der Rechenaufgabe hat jetzt eine `id`, damit die Beschriftung darüber tatsächlich zum Feld gehört. Ohne `id` zeigt das `for`-Attribut ins Leere.

> [!WARNING]
>
> Die Fehlermarkierung gehört nicht als `style`-Attribut ins Template. Mit einer Klasse bleibt die Gestaltung im Stylesheet, und die Markierung lässt sich an einer Stelle ändern.

## Grenzen der Lösung

Stimmt der Besucher erst nach dem Laden der Seite zu, wirkt die Umschaltung erst beim nächsten Aufruf. Wenn der Consent-Layer die Seite nach der Zustimmung ohnehin neu lädt, erledigt sich das von selbst. Andernfalls erwähnen Sie es im Layer.

Die Rechenaufgabe ist kein gleichwertiger Ersatz, sondern eine einfachere Hürde. Rechnen Sie damit, dass über diesen Weg mehr automatisierte Einsendungen durchkommen, und prüfen Sie nach der Umstellung, ob das Aufkommen steigt.

Die `CAPTCHA-`-Tags und die Parameter des Abschnitts `<Captcha>` gehören zum Formularprogramm INQUIRY4 und sind in dessen eigener Beschreibung dokumentiert.

## Verwandte Themen

* Wegweiser: Integration eines INQUIRY-Formulars
* Wegweiser: [Formulare für Kundenanfragen](https://dokumentation.websale.de/v8s/formulare-fuer-kundenanfragen/formulare-fuer-kundenanfragen.md)
* Referenz: [AC- (AgreementCookies)](https://dokumentation.websale.de/v8s/referenz/tags/ac-agreementcookies.md)
* Materialien: [Kontaktformular mit Captcha-Sicherheitsabfrage](https://dokumentation.websale.de/v8s/formulare-fuer-kundenanfragen/formulare-fuer-kundenanfragen.md)


## Related topics

- [Anwendungsbeispiele](https://dokumentation.websale.de/v8s/anwendungsbeispiele/anwendungsbeispiele.md)
- [RECAPTCHAV3- (Google reCAPTCHA)](https://dokumentation.websale.de/v8s/referenz/tags/recaptchav3-google-recaptcha.md)
- [Storefront API Konfigurationen](https://dokumentation.websale.de/schnittstellen/storefront-api/storefront-api-konfigurationen.md)
- [security - Sicherheitsregeln](https://dokumentation.websale.de/konfiguration/security-sicherheitsregeln.md)
- [Anhang: Nicht mehr unterstützte Parameter und Tags](https://dokumentation.websale.de/v8s/upload-modul/formulare-mit-inquiry4/anhang.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.