WPForms widget: űrlap stílusozása CSS nélkül

A WPForms ingyenes változata alig ad beleszólást abban, hogyan néz ki a kész űrlap: a mezők megjelenése a sablonodtól függ, és átszabásukhoz általában egyedi CSS kell. A WPForms widget ezt az Elementor paneljébe hozza. Kiválasztasz egy meglévő űrlapot, és a Stílus lapon átszabod a címkéit, mezőit, választómezőit és a küldés gombját.

A widget az ingyenes bővítményben van, a Pro-hoz nem kell, és az Elementor ingyenes változata is elég hozzá.

Előkészületek

• A WPForms bővítmény legyen telepítve és aktív. A widget csak ekkor jelenik meg a panelen.
• Legyen legalább egy űrlap a WPForms → Új hozzáadása oldalon. A widget nem hoz létre űrlapot.
• Kapcsold be a widgetet: The Plus Addons → Widgets, keress rá a WPForms szóra, és kapcsold be a kapcsolóját.

A widget hozzáadása és az űrlap kiválasztása

1. Szerkeszd az oldalt Elementorral.
2. Húzd a WPForms widgetet a vászonra.
3. A WPForms szakaszban a Select Form listából válaszd ki az űrlapot.
4. A Display Options szakaszban döntsd el, hogy az űrlap neve (Form Name) és leírása (Form Description) látsszon-e a mezők fölött. Mindkettő alapból Hide, tehát a widget csak a mezőket mutatja.

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

A képen a Tartalom lap látszik, az űrlap kiválasztásával.

A Stílus lap szakaszai

A panel szakaszainak a neve angolul jelenik meg.

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

A képen a szakaszok láthatók: Label, Description Text, Input Fields Styling, Textarea Fields Styling, CheckBox/Radio Field, Submit/Send Button, Outer Field, Form Container, Response Message, Extra Option és On Scroll View Animation.

Címkék és leírások

A WPForms minden mező fölé címkét ír, alá pedig, ha megadtad, rövid leírást. Mindkettőnek külön szakasza van:

• Label: a címke tipográfiája, színe és margója, a belső (al)címkék tipográfiája és színe, valamint a kötelező mező csillagának színe.
• Description Text: a kisebb súgószöveg tipográfiája, színe, hátterének és szegélyének beállításai, valamint a térközei.

Beviteli mezők és üzenetmező

Az Input Fields Styling az egysoros mezőket fedi le: szöveg, e-mail, szám, telefon, URL és legördülő lista. A Textarea Fields Styling a többsoros mezőket. A két szakasz beállításai megegyeznek:

• Padding és Margin, eszközönként külön.
• Tipográfia, Text Color és Placeholder Color.
• Háttér: szín, színátmenet vagy kép.
• Border Options: előbb kapcsold be a Box Border kapcsolót, csak utána hat a Border Style, a Border Width és a Border Color. A Border Radius kapcsolótól függetlenül működik.
• Normal és Focus fül: a Focus a mező állapota gépelés közben.

https://minta-bolt.hu/kf4-wpforms-stilus/

A képen a mezők lekerekített szegélyt kaptak, az üzenetmező és a választómezők külön szakaszban stílusozhatók.

Küldés gomb

A Submit/Send Button szakaszban szélességet, paddingot, margót, tipográfiát, szövegszínt, hátteret, szegélyt és lekerekítést állíthatsz, Normal és Hover fülön külön.

Jelölőnégyzetek és rádiógombok

A widget elrejti a böngésző saját jelölőnégyzetét és rádiógombját, és a helyére sajátot rajzol, így az űrlap minden böngészőben egyformán néz ki. A CheckBox/Radio Field szakasznak két füle van, Check Box és Radio Button, mindkettőn ugyanazok a beállítások:

• Tipográfia és Text Color a lehetőségek feliratához.
• Checked Color és Checked Bg Color a kijelölt állapotra.
• UnChecked Color és UnChecked Bg Color a többire.
• Box Border, Border Style és Border Color.

Ha az űrlapod a WPForms képes válaszlehetőségeit használja sima szöveges lehetőségek helyett, kapcsold be ugyanebben a szakaszban a Must use image choices in WPForms kapcsolót. Ekkor megjelenik az Image Checkbox Normal, az Image Checkbox Selected és a rádiógombokra ugyanilyen pár, amelyek a képcsempéket stílusozzák, nem a dobozokat.

Egyéb szakaszok

Szakasz	Mit stílusoz	Alapérték
Outer Field	A mezőket körülvevő sor: padding, margin, háttér, szegély	nincs beállítva
Form Container	Az egész űrlapot körülvevő doboz: padding, háttér, szegély, lekerekítés, árnyék	nincs beállítva
Response Message	A WPForms által kiírt visszaigazoló és érvényesítési üzenetek	nincs beállítva
On Scroll View Animation	Belépő animáció az egész űrlapra, amikor a látogató odagörget	ki

Az eredmény

Stílusbeállítás nélkül a WPForms az alapmegjelenését kapja, a widget a megadott értékeket írja rá.

https://minta-bolt.hu/kf4-wpforms/

A képen az alapállapot látszik: a mezők a WPForms saját stílusát viselik.

Működés

• A widget csak a saját példányára ír CSS-t. Ugyanazt az űrlapot két widgettel beágyazva két különböző módon stílusozhatod.
• A mezők, a logika, az értesítések és a visszaigazolások a WPForms-ban maradnak. A widget soha nem szerkeszti az űrlapot.
• A padding, a margin, a tipográfia és a szegélyszélesség eszközönként külön állítható.

Korlátok

• A widgetben nincs fájlfeltöltő szakasz, ezért a WPForms fájlfeltöltő mezői a böngésző saját vezérlőjét kapják.
• A kijelölt jelölőnégyzet pipája Font Awesome-ikon, amit a The Plus Addons maga nem tölt be. Ha az oldalon nincs más ikon, a pipa üres négyzetként jelenhet meg. Bármelyik Elementor ikon widget az oldalon betölti a betűkészletet.
• A Border Style, a Border Width és a Border Color addig nem hat, amíg a Box Border ki van kapcsolva.
• A WPForms kiegészítők elemeit ezek a szakaszok nem célozzák.

Hibaelhárítás

• A widget nincs a panelen. Nézd meg, hogy a WPForms aktív-e, majd hogy a WPForms kapcsoló be van-e kapcsolva a The Plus Addons → Widgets oldalon.
• A Select Form lista üres. Hozz létre egy űrlapot a WPForms → Új hozzáadása oldalon, és töltsd újra az Elementor szerkesztőjét.
• Az űrlap címe mindig látszik, vagy sosem. Ezt a Display Options → Form Name állítja, nem a WPForms. Alapból Hide.
• A képes válaszlehetőségeim nincsenek stílusozva. Kapcsold be a Must use image choices in WPForms kapcsolót a CheckBox/Radio Field alatt. A képes beállítások addig rejtve vannak.