Bejelentkezési űrlap widget

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.

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.

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.

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 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 Ikonját állíthatod.

További lehetőségek

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.

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:

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:

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