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

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.

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

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 szakasz szól. Az űrlap hCaptcha-védelmét a Bejelentkezési űrlap widget 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.

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

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 Ikonnal pedig ikont tehetsz a felirat mellé.

Általános beállítások

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

https://minta-bolt.hu/wp-admin/post.php?post=7&action=elementor

Regisztráció utáni műveletek

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

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

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.

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