# reCAPTCHA és hozzájárulás űrlapbővítményekben

> A Google reCAPTCHA blokkolása hozzájárulásig WPForms, Ninja Forms, Fluent Forms, HappyForms és Forminator űrlapokban.

A Google reCAPTCHA sütiket állít be, ezért hozzájárulás nélkül nem töltődhet be. Az űrlapbővítményeknél ezért két dolog kell: a Complianz blokkolja a reCAPTCHA-t, és az űrlapon egy helyőrző kéri a látogatót, hogy fogadja el a reCAPTCHA sütijeit, mielőtt elküldi az űrlapot. A helyőrző mindegyik megoldásban ugyanazokat az osztályokat használja: `cmplz-accept-service`, `cmplz-accept-marketing`, és (a bővítménytől függően) egy bővítmény-specifikus osztályt. A `data-service="google-recaptcha"` és `data-category="marketing"` jellemző mondja meg, melyik szolgáltatásra és kategóriára vonatkozik.

## Közös alapbeállítás a Complianzban

Bármelyik űrlapbővítményt használod, a Complianznak tudnia kell, hogy reCAPTCHA-t használsz:

1. Nyisd meg a **Complianz → Wizard → Consent → Services** lépést (a régebbi változatokban a **Cookies → Integrations**).
2. A „Does your website use third-party services?” kérdésre válaszolj igennel.
3. A „Select the types of third-party services that your website uses” listában jelöld be a **Google reCAPTCHA** négyzetet.
4. A megjelenő „Do you want to block reCAPTCHA before consent, and when consent is revoked?” kérdésre válaszolj igennel.
5. Fejezd be a varázsló további lépéseit.

Ezután a Complianz blokkolja a reCAPTCHA szkriptet, ha észleli, és hozzájárulás után engedi futni. Egyes űrlapbővítményeknél a **Complianz → Integrations → Plugins** oldalon az adott bővítmény integrációját is be kell kapcsolni (lásd lent).

## WPForms

A WPForms-ban a hozzájárulás egy hivatkozással oldható meg, amely csak addig látszik, amíg a sütiket el nem fogadták.

1. Az űrlapszerkesztőben válaszd ki a küldés gombhoz legközelebbi mezőt, és nyisd meg a további beállításait.
2. A **Description** (leírás) mezőbe másold be a következő HTML-t:

```html
<button data-service="google-recaptcha" data-category="marketing" class="cmplz-blocked-content-container cmplz-blocked-content-notice cmplz-accept-service cmplz-accept-marketing cmplz-wpforms" style="text-align: left; cursor: pointer;">
Click here to accept reCaptcha cookies before sending the form.
</button>
```

3. Szükség esetén formázd meg az új gombot. A következő CSS elrejti a küldés gombot hozzájárulás előtt, megmutatja, ha a marketing vagy a reCAPTCHA hozzájárulás megvan, formázza a gombot, és (nem kötelezően) elrejti a helyőrzőt a hozzájárulás után:

```css
/* A küldés gomb elrejtése hozzájárulás előtt */
.wpforms-submit-container {
  display: none;
}

/* A küldés gomb megjelenítése, ha a marketing vagy a reCAPTCHA hozzájárulás megvan */
.cmplz-google-recaptcha .wpforms-submit-container, .cmplz-marketing .wpforms-submit-container {
  display: block !important;
}

/* A gomb stílusa */
button.cmplz-blocked-content-notice.cmplz-accept-marketing.cmplz-wpforms {
  background-color: #fff !important;
  border: 1px solid #ddd;
  color: #333;
  font-size: 1.2em;
  padding: 10px 15px;
  margin-top: 15px;
}

/* Nem kötelező: a helyőrző elrejtése a hozzájárulás után */
.cmplz-marketing button.cmplz-blocked-content-container.cmplz-blocked-content-notice.cmplz-wpforms,
.cmplz-google-recaptcha button.cmplz-blocked-content-container.cmplz-blocked-content-notice.cmplz-wpforms {
  display: none;
}
```

4. Eredmény: hozzájárulás nélkül a küldés gomb nem látszik, helyette a hozzájárulási gomb jelenik meg. Hozzájárulás után a küldés gomb elérhető, és a reCAPTCHA betöltődik. A megjelenés a WPForms alapértelmezett stílusától függ, tetszés szerint módosítható.

## Fluent Forms

A Fluent Forms-szal a reCAPTCHA és a Complianz minden funkció megtartása mellett használható.

1. A Complianz varázslójában jelöld be a reCAPTCHA-t harmadik félként, és a követő kérdésre válaszolj igennel (lásd a közös alapbeállítást).
2. A Fluent Formsban a **Global settings → reCaptcha** alatt add meg a reCAPTCHA v3 API-kulcsokat. A v3 Invisible változatot használd.
3. A kívánt űrlapban add hozzá a reCAPTCHA blokkot (**Advanced settings**).
4. A reCAPTCHA blokk alá tegyél egy **Custom HTML** blokkot, és add meg ezt a kódot:

```html
<div data-service="google-recaptcha" data-category="marketing" class="cmplz-blocked-content-container cmplz-blocked-content-notice cmplz-accept-service cmplz-accept-marketing cmplz-wpforms" style="text-align: left; cursor: pointer;">
Click here to accept reCaptcha cookies before sending the form.
</div>
```

A kódban átállíthatod a stílust, az igazítást és a szöveget. A gombot valószínűleg a témád formázza; ha módosítani szeretnéd, használd a WPForms résznél látott CSS-t (ugyanazokat az osztályokat használja).

## Ninja Forms

A reCAPTCHA v2 integrációja a Ninja Formsban beépített, külön teendő nincs. A reCAPTCHA v3-hoz egy kiegészítő bővítmény kell:

1. Telepítsd az Advanced noCaptcha reCAPTCHA bővítményt, és add meg a reCAPTCHA v3 hitelesítő adatait.
2. Tedd az `[anr-captcha]` shortcode-ot a Ninja Form egy HTML mezőjébe.
3. Hozz létre egy második HTML mezőt, amelybe a hozzájárulási helyőrző HTML-je és CSS-e kerül (ugyanaz a felépítés, mint a többi űrlapbővítménynél: gomb a `cmplz-accept-service cmplz-accept-marketing` osztályokkal, amely hozzájárulás után eltűnik).

## HappyForms

A HappyForms és a reCAPTCHA hozzájárulásához néhány extra lépés kell.

**Követelmények:**

- A **Complianz → Wizard → Consent → Integrations** lépésnél jelöld be a reCAPTCHA-t harmadik félként, és a követő kérdésre válaszolj úgy, hogy a Complianz hozzájárulásig blokkolja.
- A **Complianz → Integrations** oldalon a HappyForms integráció legyen bekapcsolva.
- A legjobb eredményhez a HappyFormsban reCAPTCHA v3 Invisible kulcsokat használj.

**Helyőrző mező létrehozása:** a HappyFormsban nincs egyéni HTML mező, ezért egy **Single Choice** mezőt használunk.

1. Vegyél fel egy új **Single Choice** mezőt, és ne jelöld be a „Require an answer” beállítást.
2. Az **Additional CSS class(es)** mezőbe írd be: `cmplz-accept-service cmplz-accept-marketing cmplz-happyforms`.
3. Válaszként add meg például: „Click here to enable reCaptcha Cookies before sending this form”.
4. Rejtsd el a mező fő címkéjét.

**Beállítások (nem kötelező):** az adatvédelmi szabályoknak való megfelelés érdekében ajánlott kikapcsolni a **Setup** lapon ezeket: „Save incomplete and abandoned submissions”, „Store replies and attachments in database or delete them after X days” (ezt jelezd az adatkezelési tájékoztatóban), valamint „Capture user metadata (IP, language, platform, time, and timezone)”.

**Egyéni CSS:** a helyőrző hozzájárulás után nem kell, ez tünteti el:

```css
.cmplz-google-recaptcha .cmplz-happyforms, .cmplz-marketing .cmplz-happyforms {
  display: none;
}
```

Eredmény: a küldés gomb fölött kattintható helyőrző látszik, amely hozzájárulás után eltűnik.

## Forminator

Ez a megoldás olyan űrlapot ad, amely csak a Google reCAPTCHA elfogadása után küldhető el.

**A Complianz beállítása:** lásd a közös alapbeállítást (**Complianz → Wizard → Consent → Services**).

**A reCAPTCHA-kulcs beállítása a Forminatorban:**

1. Nyisd meg a **Forminator → Settings → CAPTCHA** oldalt, és válaszd ki a használt reCAPTCHA típusát (v2 vagy v3; a példa a v3-at használja). Ha még nincs API-kulcsod, a Google reCAPTCHA adminisztrációs felületén készíthetsz.
2. Add meg a **Site Key** és **Secret Key** értékét, és kattints a **Save Settings** gombra. Ha jól csináltad, a Forminator előnézetében megjelenik a „Protected by reCAPTCHA” jelvény.

**Űrlap létrehozása reCAPTCHA-val:**

1. Hozz létre új űrlapot: **Forminator → Forms**.
2. Minden olyan űrlapnál, ahol a reCAPTCHA-t blokkolni kell, kapcsold ki a **Load form using AJAX** beállítást: kattints az űrlap **Edit** gombjára, majd **Behavior → Rendering**. Erre azért van szükség, mert AJAX-betöltésnél az űrlap elemei és a reCAPTCHA ugyanabban a `multi.js` fájlban töltődnek be, amelyet nem lehet a működés megzavarása nélkül blokkolni.
3. Add hozzá az űrlap mezőit, végül egy **Captcha** elemet.
4. A Captcha elem beállításainál ugyanazt a reCAPTCHA-típust válaszd, amelyhez az API-kulcsokat megadtad (a példában v3).
5. Mentsd és tedd közzé az űrlapot, majd add hozzá a kívánt oldalakhoz.

Eredmény: hozzájárulás előtt az űrlapon reCAPTCHA-helyőrző látszik, és az űrlap nem küldhető el. Ha a látogató elfogadja a reCAPTCHA szolgáltatást, a helyőrző eltűnik, és az űrlap elküldhető.

## Contact Form 7 és a WP Consent API

A Contact Form 7 5.4-es verziójától kezdve (2021. február 24.) a bővítmény átrendezte a funkcióit és a kampóit (hook), ezért a Complianz nem tudja szabályozni benne a reCAPTCHA-hozzájárulást. A Complianz felismeri ezt, és eldobja az integrációt, mert különben az űrlap elromlana. Így mindkét bővítmény naprakész változatában a reCAPTCHA hozzájárulás előtt nincs blokkolva.

**Jelenlegi állapot:**

- A Contact Form 7 5.4 vagy újabb nem támogatott a Complianz natív reCAPTCHA-megoldásával: ha mindkét integráció be van kapcsolva, az űrlapok nem küldhetők el. A Complianz az 5.4 vagy újabb verziónál automatikusan kikapcsolja ezeket az integrációkat. Ezzel a reCAPTCHA felszabadul, ezért spamvédelemre és/vagy hozzájárulásra új megoldás kell.
- A Contact Form 7 5.3 előtti változatai továbbra is támogatottak.

**Rövid távú megoldások:**

- Visszatérés a Contact Form 7 5.3 előtti változatára.
- A reCAPTCHA V3 lecserélése Honeypotra, Akismetre vagy Friendly Captchára.
- Váltás WPFormsra vagy más támogatott űrlapbővítményre (lásd fent).
- Nem ajánlott: a Contact Form 7 és a reCAPTCHA integráció kikapcsolása a **Complianz → Integrations** oldalon.

**Miért szűnt meg a további Contact Form 7 integráció?** Két külön integráció működött a Contact Form 7-hez. Az 5.4-es változat átszervezte a funkciókat, és korlátozta a stabil integráció lehetőségét. Ha több integrációt kell fenntartani egy olyan bővítményhez, amely akadályozza az integrációt, az nem tartható, főleg akkor, ha minden bővítményre kiterjedő tartós megoldás létezik.

### A tartós megoldás: WP Consent API

A WordPress Core-Privacy fejlesztői csapatának tagjai szabványos réteget készítettek a bővítmények közötti hozzájárulás-kommunikációhoz. A WP Consent API-t a Complianz és más hozzájárulás-kezelő platformok (például a Cookiebot) támogatják. A rétegnek köszönhetően a bővítmények egységes módon kapják meg, mit engedélyezett a látogató.

A Contact Form 7 esetén a folyamat így nézne ki:

1. A Complianz rögzíti a látogató hozzájárulását a régiójának és beállításainak megfelelő sütikezelés alapján.
2. A Complianz továbbítja ezt a Consent API-nak.
3. A Contact Form 7 megvárja, hogy az API megmondja a látogató beállításait.
4. Ezután a Contact Form 7 vagy figyelmeztet, hogy hozzájárulás nélkül az űrlap nem használható, vagy felszabadítja a reCAPTCHA-t.

A GDPR-hoz hasonló szigorú adatvédelmi törvényeknél a reCAPTCHA alapból blokkolt, és csak a látogató hozzájárulása oldja fel. Ha a Contact Form 7 bevezetné a Consent API-t, a további fejlesztések nem okoznának problémát, és milliók felelhetnének meg az adatvédelmi szabályoknak. Ugyanez igaz a Jetpackra, a WooCommerce Analyticsre, a Facebook pixelre és a Google Site Kitre is. A WP Consent API integrációjáról lásd az [Integrációk](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/integraciok/) fejezetet.