# Bejelentkezési űrlap widget

> A WordPress-bejelentkezés saját megjelenéssel: mezők, közösségi bejelentkezés, átirányítások, reCAPTCHA v3, Cloudflare Turnstile, hCaptcha és a fejlesztői szűrők.

A **Bejelentkezési űrlap** widgettel a WordPress bejelentkezési űrlapját bárhová beteheted az Elementorral szerkesztett oldalakon, és a megjelenését az oldalad arculatához igazíthatod. Kérhetsz hozzá közösségi bejelentkezést (Google, Facebook), spamvédelmet, és megadhatod, hová kerüljön a látogató belépés vagy kilépés után.

![A bejelentkezési űrlap a weboldalon](./kepek/urlapok-bejelentkezes-elo.webp)

*A bejelentkezési űrlap a weboldalon* (https://minta-bolt.hu/urlapok-2-teszt-1/)

A képen az alapbeállítású űrlap látszik: a két mező, a **Bejelentkezés megjegyzése** jelölőnégyzet, a gomb, valamint a **Regisztrálás** és az **Elfelejtetted a jelszavad?** link.

## Mit tud a widget

- saját mezők (felhasználónév vagy e-mail-cím, jelszó);
- Google- és Facebook-bejelentkezés, külön világos és sötét stílussal;
- az egyéni űrlap elrejthető, ilyenkor csak a közösségi gombok látszanak;
- reCAPTCHA v3 és Cloudflare Turnstile védelem;
- egyéni átirányítás belépés és kilépés után;
- egyéni cím a **Regisztrálás** és az **Elfelejtetted a jelszavad?** linkeknek;
- elválasztó az űrlap és a közösségi bejelentkezés között;
- a feliratok megjelenítése, elrejtése vagy átírása;
- a gomb és a mezők ellenőrzési üzeneteinek teljes stílusbeállítása.

## Űrlapmezők

A **Tartalom** fül **Űrlapmezők** szakasza a mezőket és a védelmet állítja.

![Az Űrlapmezők szakasz beállításai](./kepek/urlapok-bejelentkezes-urlapmezok.webp)

*Az Űrlapmezők szakasz beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **Mezőcímke** | **Alapértelmezett**: a WordPress saját címkéi látszanak. **Egyéni**: te írod meg a címkéket. **Nincs**: nincs címke. |
| **Mező helyőrzője** | A beviteli mezőben látszó halvány szöveg ki- és bekapcsolása. |
| **Beviteli mező mérete** | A mezők mérete (extra kicsitől extra nagyig). |
| **Bejelentkezés megjegyzése** | Az **Emlékezz rám** jellegű jelölőnégyzet megjelenítése. |
| **AJAX-alapú űrlapbeküldés bekapcsolása** | Az űrlap az oldal újratöltése nélkül küldődik el. |
| **Google reCaptcha v3 engedélyezése** | reCAPTCHA-védelem az űrlapon (lásd lent). |
| **Elrendezés** | Bekapcsolva a **Bejelentkezés megjegyzése** és a belépés gomb egy sorban jelenik meg. |
| **Mezők ikonja** | Ikon a mezők mellett. |
| **Cloudflare Turnstile engedélyezése** | Cloudflare Turnstile védelem az űrlapon (lásd lent). |

## Közösségi bejelentkezés

A **Közösségi bejelentkezés** szakaszban a **Google-bejelentkezés engedélyezése** és a **Facebook-bejelentkezés engedélyezése** kapcsolóval teheted az űrlapra a gombokat.

![A Közösségi bejelentkezés szakasz](./kepek/urlapok-bejelentkezes-kozossegi.webp)

*A Közösségi bejelentkezés szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=elementor)

A gombok csak akkor működnek, ha a UAE beállításai között megadtad a Google Client ID-t, illetve a Facebook App ID-t és App Secretet. Ezek beszerzését a [Közösségi bejelentkezés](https://hub.hellowp.io/hu/plugins/ultimate-elementor/urlapok-kozossegi-bejelentkezes/) fejezet írja le. A Google kapcsolója alatt a panel emlékeztet is erre.

Ha bekapcsolod valamelyik közösségi bejelentkezést, a szakasz további beállításai megjelennek:

| Beállítás | Mit csinál |
|---|---|
| **E-mail küldése** | Értesítés az új, közösségi fiókkal belépő felhasználóról: **Nem**, **Admin**, **Felhasználó** vagy **Adminisztrátor és felhasználó**. |
| **Egyéni űrlap elrejtése** | Elrejti a felhasználónév és jelszó mezőket, így csak a közösségi gombok látszanak. |
| **Sablon kiválasztása** | A közösségi gombok kinézete: **Világos** vagy **Sötét**. |
| **Pozíció** | A közösségi gombok az űrlap **Felül** vagy **Alul** jelennek meg. |

### Elválasztó

Ha az űrlap mellett közösségi gombokat is kínálsz, az **Elválasztó** szakasszal tehetsz közéjük egy szöveges elválasztót (például „vagy”), hogy a látogató lássa: választhat a kettő között. Az elválasztó szövege és stílusa szabadon állítható.

### Csak közösségi gombok

Ha a látogatók csak a Google- vagy Facebook-fiókjukkal léphetnek be, kapcsold be az **Egyéni űrlap elrejtése** kapcsolót: a mezők helyett csak a közösségi gombok látszanak.

## Gomb

A **Gomb** szakaszban a belépés gomb **Szöveg**ét, **Méret**ét, **Igazítás**át és **Ikon**ját állíthatod.

## További lehetőségek

![A További lehetőségek szakasz](./kepek/urlapok-bejelentkezes-tovabbi.webp)

*A További lehetőségek szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=6&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **Átirányítás bejelentkezés után** | Egy saját oldalad címe, ahová a látogató a sikeres belépés után kerül. |
| **Átirányítás kijelentkezés után** | Ugyanez kilépés után. |
| **Regisztrálás** | Megjeleníti a regisztrációs linket. A **Szöveg** mezővel átírhatod a feliratát, a **Link célja** listával pedig megadhatod, hová mutasson: az alapértelmezett WordPress-oldalra vagy egyéni címre. Egyéni regisztrációs űrlap esetén válaszd az egyéni címet, és add meg az oldal URL-jét. |
| **Elfelejtetted a jelszavad?** | Az elfelejtett jelszó linkje, a **Szöveg** és a **Link célja** ugyanígy állítható. |
| **Elválasztó** | A két link közötti elválasztójel. |
| **Belépés utáni üzenet** | A már bejelentkezett látogatónak mutatott üzenet. |
| **Igazítás**, **Szöveg színe**, **Tipográfia** | A linkek és az üzenet megjelenése. |

## Stílus

A **Stílus** fül szakaszai:

- **Térközök**: a címkék, az elválasztó és a közösségi gombok térközei;
- **Űrlapmezők**: a címkék, a beviteli mezők és a **Bejelentkezés megjegyzése** felirat tipográfiája és színei;
- **Közösségi bejelentkezés**: igazítás, lekerekítés és dobozárnyék;
- **Gomb**: a belépés gomb stílusa;
- **Mezőellenőrzési üzenetek**: a hibaüzenetek színe és betűtípusa.

## Védelem a spam ellen

### reCAPTCHA v3

A widget a Google reCAPTCHA v3 védelmét tudja használni. A v3 a látogatótól nem kér semmit, a botokat a háttérben szűri ki. Egyszer be kell állítanod a kulcsokat, utána bármelyik bejelentkezési űrlapon bekapcsolhatod.

1. Nyisd meg a Google reCAPTCHA adminisztrációs oldalát, és hozz létre egy új webhelyet **reCAPTCHA v3** típussal.
2. Adj egy **címkét** a bejegyzésnek, add meg a domainedet (például `www.sajatoldalad.hu`) és egy kapcsolattartó e-mail-címet.
3. Fogadd el a felhasználási feltételeket, és küldd el az űrlapot.
4. A megjelenő oldalról másold ki a **Site key** és a **Secret key** értékét.
5. A WordPress admin felületén menj a **UAE → Beállítások → Integrations** oldalra, és a **Setup reCAPTCHA v3** szakaszban illeszd be a két kulcsot. Ha a botok átjutnak, emeld meg a **Score Threshold** értékét (alapértéke 0.5), majd kattints a **Save** gombra.
6. Szerkeszd az oldalt az Elementorral, és húzd be a **Bejelentkezési űrlap** widgetet.
7. Az **Űrlapmezők** szakaszban kapcsold be a **Google reCaptcha v3 engedélyezése** kapcsolót, és mentsd az oldalt.

![A reCAPTCHA és a Cloudflare Turnstile kulcsai a UAE integrációs oldalán](./kepek/urlapok-integraciok-recaptcha.webp)

*A reCAPTCHA és a Cloudflare Turnstile kulcsai a UAE integrációs oldalán* (https://minta-bolt.hu/wp-admin/admin.php?page=uaepro)

A képen a **Setup reCAPTCHA v3** és a **Setup Cloudflare Turnstile** szakasz látszik. A weboldalon a reCAPTCHA jelvénye jelenik meg.

### Cloudflare Turnstile

A Cloudflare Turnstile a captchák adatvédelmi szempontból kíméletesebb alternatívája. A **Site key** és a **Secret key** értékét ugyanazon az oldalon, a **Setup Cloudflare Turnstile** szakaszban kell megadni, a védelmet pedig a widget **Cloudflare Turnstile engedélyezése** kapcsolójával kapcsolod be.

### hCaptcha

A hCaptcha külön bővítménnyel köthető a bejelentkezési és a regisztrációs űrlaphoz. A widgetben semmit nem kell bekapcsolnod.

1. Telepítsd és aktiváld a **hCaptcha for WordPress** bővítményt (**Bővítmények → Új bővítmény hozzáadása**).
2. Jelentkezz be a hCaptcha oldalán, és a **+ New Site** gombbal hozz létre új webhelyet. Másold ki a **Site Key** és a **Secret Key** értéket.
3. A WordPressben nyisd meg a **hCaptcha → General Settings** oldalt, illeszd be a két kulcsot, és mentsd a beállításokat.
4. Nyisd meg a **hCaptcha → Integrations** oldalt, és keresd meg az **Ultimate Addons for Elementor** szakaszt.
5. Kapcsold be a **Login Form** és a **Registration Form** lehetőséget, amelyiket védeni szeretnéd.

Ezután a hCaptcha magától megjelenik a weboldalon az űrlapokon.

## Hasznos információk szakasz

A widget paneljének alján a **Hasznos információk** szakasz rövid súgócikk-hivatkozásokat ad: az első lépésekhez, a reCAPTCHA v3-hoz, a Google Client ID és a Facebook App ID létrehozásához, valamint a csak közösségi gombos bejelentkezéshez.

## Fejlesztőknek: szűrők

Két szűrővel változtathatod meg a widget szövegeit.

A hibaüzenetek szövegei:

```php
add_filter( 'uael_form_error_string', function( $strings ) {
    // Itt módosíthatod a szövegeket.
    return $strings;
}, 10, 1 );
```

A **Bejelentkezés megjegyzése** felirata:

```php
add_filter( 'uael_login_remember_me', function( $string ) {
    // Itt módosíthatod a szöveget.
    return $string;
} );
```