# Felhasználói regisztrációs űrlap widget

> Regisztrációs űrlap készítése: mezők, szerepkör, regisztráció utáni műveletek, e-mail csak e-mail-mezővel, stílus és használat a WooCommerce fiókoldalon.

A **Felhasználói regisztrációs űrlap** widgettel olyan űrlapot készíthetsz, amelyen a látogatók új felhasználói fiókot hozhatnak létre az oldaladon. Beállíthatod, milyen szerepkört kapjanak, hová kerüljenek regisztráció után, és küldhetsz nekik e-mailt.

![A regisztrációs űrlap a weboldalon](./kepek/urlapok-regisztracio-elo.webp)

*A regisztrációs űrlap a weboldalon* (https://minta-bolt.hu/urlapok-2-teszt-2/)

A képen az alapbeállítású űrlap látszik: **Felhasználónév**, **E-mail-cím** és **Jelszó** mező, alatta a **Regisztrálás** gomb.

## Előfeltétel: a regisztráció engedélyezése

A WordPressben engedélyezned kell, hogy bárki regisztrálhasson: **Beállítások → Általános → Tagság**, és jelöld be a **Bárki regisztrálhat** lehetőséget. Enélkül az űrlap nem tud új felhasználót létrehozni.

## Az űrlap elkészítése

1. Hozz létre új oldalt, vagy nyiss meg egy meglévőt, és szerkeszd az Elementorral.
2. Húzd be a **Felhasználói regisztrációs űrlap** widgetet. Az alapmezők a felhasználónév, az e-mail-cím és a jelszó.
3. Az **Űrlapmezők** szakaszban adj hozzá vagy törölj mezőket. Választható mezők: **Felhasználónév**, **Keresztnév**, **Vezetéknév**, **E-mail-cím**, **Jelszó**, **Jelszó megerősítése**, **Telefonszám**, valamint két védelmi mező: **Honeypot** és **reCAPTCHA v3**.
4. Állítsd be a regisztráció utáni műveleteket és a szerepkört (lásd lent).
5. Mentsd az oldalt. Az űrlap kész a használatra.

A kész szakaszt mentheted is, és a regisztrációs oldalon sablonként beillesztheted, mint bármely más Elementor-widgetet.

## Űrlapmezők

![Az Űrlapmezők szakasz](./kepek/urlapok-regisztracio-urlapmezok.webp)

*Az Űrlapmezők szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

A mezőlistában minden mezőnél kérheted, hogy kötelező legyen, és megadhatod az **Oszlopszélességet**. A lista alatt:

| Beállítás | Mit csinál |
|---|---|
| **Beviteli mező mérete** | A mezők mérete extra kicsitől extra nagyig. |
| **Címke** | A mezők címkéinek megjelenítése vagy elrejtése. |
| **Kötelező jelölő** | Csillag a kötelező mezők címkéje mellett. |
| **Mezők ikonja** | Ikon a mezők mellett. |
| **Cloudflare Turnstile engedélyezése** | Cloudflare Turnstile védelem az űrlapon. A kulcsokat a **UAE → Beállítások → Integrations** oldal **Setup Cloudflare Turnstile** szakaszában kell megadni. |

A spamelleni mezőkről a [Spamvédelem](#spamvédelem-honeypot-és-recaptcha-v3) szakasz szól. Az űrlap hCaptcha-védelmét a [Bejelentkezési űrlap widget](https://hub.hellowp.io/hu/plugins/ultimate-elementor/urlapok-bejelentkezesi-urlap/) fejezetben leírt módon, a hCaptcha bővítmény integrációs oldalán kapcsolhatod be.

## Spamvédelem: Honeypot és reCAPTCHA v3

A regisztrációs űrlapot két mezővel védheted a spamrobotoktól. Egyszerre mindkettőt is használhatod, így a védelem kétszeres.

### Honeypot

A honeypot („méztégely”) egy rejtett mező, amelyet csak a spamrobotok látnak. Ha egy robot kitölti, az űrlap spamnek veszi, és elutasítja, így a robot nem tud regisztrálni. A valódi látogatónak nem kell számfeladványt vagy képes feladatot megoldania, ezért a reCAPTCHA-nál kényelmesebb megoldás.

Előnyei: távol tartja a spamrobotokat, segít felismerni a támadási kísérleteket, a rosszindulatú próbálkozásokat könnyebb kivizsgálni, és egy kattintással beállítható.

1. Hozz létre egy oldalt, és szerkeszd az Elementorral.
2. Húzd be a **Felhasználói regisztrációs űrlap** widgetet.
3. A **Tartalom** fül **Űrlapmezők** szakaszában kattints az **Elem hozzáadása** gombra.
4. A **Típus** listában válaszd a **Honeypot** lehetőséget.
5. Frissítsd az oldalt. Az űrlap védett.

Okosabb védelemhez tehetsz több honeypot mezőt is az űrlapra, véletlenszerű sorrendben a többi mező közé. Így még a ravaszabb robotok is nagyobb eséllyel elakadnak.

### reCAPTCHA v3

A Google reCAPTCHA v3 a háttérben, a látogató zavarása nélkül ismeri fel a robotokat. A regisztrációs űrlap csak a v3-as változatot támogatja. A kulcsokat előbb a Google-től kell megszerezned.

1. A Google reCAPTCHA adminisztrációs oldalán hozz létre új webhelyet, és válaszd a **reCAPTCHA v3** típust.
2. Adj egy címkét, amely azonosítja a webhelyet.
3. Add meg a domaint (például `www.sajatoldal.hu`).
4. Add meg egy adminisztrátori e-mail-címet.
5. Fogadd el a szolgáltatási feltételeket, és küldd el az űrlapot.
6. A következő oldalon másold ki a **Site Key** és a **Secret Key** értékét.
7. A WordPress admin felületén menj a **UAE → Beállítások → Integrations** oldalra, a **Setup reCAPTCHA v3** szakaszban illeszd be a két kulcsot, és kattints a **Save** gombra. Ha a botok mégis átjutnak, a **Score Threshold** értékét emeld meg.
8. Szerkeszd Elementorral a regisztrációs oldalt, és jelöld ki a **Felhasználói regisztrációs űrlap** widgetet.
9. Az **Űrlapmezők** szakaszban kattints az **Elem hozzáadása** gombra, és a **Típus** listában válaszd a **reCAPTCHA v3** lehetőséget.
10. A **Jelvény pozíciója** listában válaszd ki, hol látszódjon a reCAPTCHA jelvénye, majd mentsd az oldalt.

![A reCAPTCHA v3 mező a regisztrációs űrlap mezői között](./kepek/urlapok-3-recaptcha-mezo.webp)

*A reCAPTCHA v3 mező a regisztrációs űrlap mezői között* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

A képen a **Típus** a **reCAPTCHA v3**, alatta a **Jelvény pozíciója** lista. Ha a kulcsok még nincsenek megadva, a sárga figyelmeztetés ezt jelzi, a hivatkozása pedig az integrációs beállításokra visz.

A **Jelvény pozíciója** lista értékei:

| Érték | Hol jelenik meg a jelvény |
|---|---|
| **Lent jobbra** | Az oldal jobb alsó sarkában (alapérték). |
| **Bal alsó** | Az oldal bal alsó sarkában. |
| **Beágyazott** | Az űrlapban, a mezők között. |

## Regisztrációs gomb

![A Regisztrációs gomb szakasz](./kepek/urlapok-regisztracio-gomb.webp)

*A Regisztrációs gomb szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

A **Szöveg** mezővel átírhatod a gomb feliratát. A **Méret**, az **Oszlopszélesség** és az **Igazítás** a gomb helyét és méretét adja, az **Ikon**nal pedig ikont tehetsz a felirat mellé.

## Általános beállítások

![Az Általános beállítások szakasz](./kepek/urlapok-regisztracio-altalanos.webp)

*Az Általános beállítások szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

| Beállítás | Mit csinál | Alapérték |
|---|---|---|
| **Űrlap elrejtése a bejelentkezett felhasználók elől** | A már bejelentkezett látogatók nem látják az űrlapot. | Nem |
| **Új felhasználói szerepkör** | Az új felhasználó szerepköre. Az **Alapértelmezett** a WordPress **Beállítások → Általános** oldalán megadott szerepkört adja. Tagsági oldalon például állíthatod **Feliratkozó**ra. | Alapértelmezett |
| **Bejelentkezés** | A regisztrációs gomb alatt megjelenik a bejelentkezési oldal linkje. | Nem |
| **Elfelejtett jelszó** | A gomb alatt megjelenik az elfelejtett jelszó linkje. | Nem |
| **Jelszóerősség-ellenőrzés** | A jelszó erősségét jelző sáv a jelszómező alatt. | Elrejtés |

A **Bejelentkezés** és az **Elfelejtett jelszó** bekapcsolása után a linkek stílusát és igazítását is állíthatod.

## Elfogadási mező

Az **Elfogadási mező** szakasz **Bekapcsolás** kapcsolója egy elfogadási jelölőnégyzetet ad az űrlaphoz (például az adatkezelési tájékoztató elfogadásához).

![Az Elfogadási mező szakasz](./kepek/urlapok-regisztracio-elfogadas.webp)

*Az Elfogadási mező szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

## Regisztráció utáni műveletek

![A Regisztráció utáni műveletek szakasz](./kepek/urlapok-regisztracio-muveletek.webp)

*A Regisztráció utáni műveletek szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

A **Művelet hozzáadása** mezőben választhatod ki, mi történjen a sikeres regisztráció után. Több művelet is kiválasztható:

| Művelet | Mit csinál |
|---|---|
| **Átirányítás** | A látogatót egy általad megadott oldalra viszi, például egy köszönő oldalra vagy a bejelentkezési oldalra. Az **URL** mezőbe írd az oldal címét. |
| **Automatikus bejelentkezés** | A látogató a regisztráció után magától belép, nem kell újra bejelentkeznie. |
| **E-mail küldése** | Értesítő e-mailt küld a felhasználónak a sikeres regisztrációról. A tartalma az **E-mail-cím** szakaszban szabható testre. |

## E-mail-cím

![Az E-mail-cím szakasz](./kepek/urlapok-regisztracio-email.webp)

*Az E-mail-cím szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

Az **E-mail-sablon** listában az **Alapértelmezett** sablon mellett választhatsz egyéni sablont is. Egyéni sablonnál megjelenik egy szövegmező, amelybe a saját üzenetedet írhatod. Alapértelmezett üzenetet is kapsz, amelyet átírhatsz.

### Csak e-mail-mezős regisztráció

A regisztráció működik úgy is, hogy az űrlapon csak az e-mail-cím mező van:

1. Töröld az űrlap összes mezőjét az **E-mail-cím** kivételével.
2. A **Regisztráció utáni műveletek** között add hozzá az **E-mail küldése** műveletet.
3. Az **E-mail-sablon** listában válaszd az egyéni lehetőséget.
4. Az üzenetbe kerüljön be a jelszó, hogy a felhasználó megkapja, hogyan léphet be.

A panel is jelzi: ha az űrlapon csak e-mail mező van, az e-mail-sablonnál az egyéni lehetőséget kell választani.

### Mezők beszúrása az e-mailbe

Az egyéni üzenetbe az űrlap mezőinek értékét shortcode-okkal illesztheted be:

| Shortcode | Értéke |
|---|---|
| `[field=username]` | Felhasználónév |
| `[field=email]` | E-mail-cím |
| `[field=password]` | Jelszó |
| `[field=first_name]` | Keresztnév |
| `[field=last_name]` | Vezetéknév |

## Siker- és hibaüzenetek

![A Siker- és hibaüzenetek szakasz](./kepek/urlapok-regisztracio-uzenetek.webp)

*A Siker- és hibaüzenetek szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor)

A **Sikerüzenet** és a **Hibaüzenet** mezőben átírhatod a regisztráció után megjelenő szövegeket. Alapértelmezetten a sikerüzenet „Köszönjük, hogy regisztráltál nálunk!”.

## Stílus

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

- **Térközök**: a mezők közti távolság;
- **Címke**: szín és tipográfia;
- **Beviteli mezők**: szövegszín, tipográfia és szegély;
- **Regisztrációs gomb**: belső térköz, tipográfia, háttér és szegély;
- **Siker- és hibaüzenetek**: a mezőellenőrzés és az üzenetek színe és tipográfiája.

## Példa: regisztrációs űrlap a WooCommerce fiókoldalon

Egyéni fiókoldalra is beteheted az űrlapot:

1. Hozz létre új oldalt, például „Egyéni fiókoldal” néven, és szerkeszd az Elementorral.
2. Készíts el rajta egy regisztrációs űrlapot a fenti lépésekkel, és mentsd.
3. A WordPressben nyisd meg a **WooCommerce → Beállítások → Haladó** oldalt, az **Oldalbeállítás** részen a **Fiókom oldal** listában válaszd ki az új oldalt.

Ezután a WooCommerce fiókoldalán a regisztrációs űrlap látszik.

## Gyakori kérdések

### Hogyan engedélyezem vagy tiltom a regisztrációt?

A WordPress admin felületén: **Beállítások → Általános → Tagság → Bárki regisztrálhat**. Ennek bekapcsolva kell lennie, amíg a regisztrációs űrlap widgetet használod.

### Hogyan állítom be az új felhasználók szerepkörét?

A **Beállítások → Általános → Új felhasználók alapértelmezett szerepköre** listában. Válaszd azt a szerepkört, amelyre a webhelyednek szüksége van. A widget **Új felhasználói szerepkör** beállítása ezt felülírhatja.

### Hogyan kezelem a felhasználókat regisztráció után?

A **Felhasználók → Minden felhasználó** oldalon. Itt szerkesztheted a felhasználót, és átállíthatod a szerepkörét.

## Fejlesztőknek: szűrő a hibaüzenetekhez

A widget hibaüzeneteinek szövegeit az `uael_form_error_string` szűrővel módosíthatod. A szűrő a hibaüzenet-szövegek tömbjét kapja, és a módosított tömböt kell visszaadnia. A kódot a sablon `functions.php` fájljába vagy egy saját bővítménybe tedd.

```php
add_filter( 'uael_form_error_string', function( $strings ) {
    // Itt módosíthatod az üzenetek szövegét.
    return $strings;
}, 10, 1 );
```