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

Az Everest Forms húzd-és-ejtsd űrlapépítő, de a kész űrlap kinézetét nagyrészt a sablonod határozza meg. Az Everest Form widget ezt az Elementor paneljébe hozza: kiválasztasz egy kész űrlapot, és a Stílus lapon átszabod a címkéit, mezőit, választómezőit és a küldés gombját, CSS nélkül.

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

• Az Everest Forms bővítmény legyen telepítve és aktív. A widget a The Plus Addons → Widgets oldalon csak addig látszik, amíg ez a bővítmény aktív.
• Legyen legalább egy űrlap az Everest Forms → Új hozzáadása oldalon. A Select Form lista csak a meglévő űrlapokat mutatja.
• Kapcsold be a widgetet: The Plus Addons → Widgets, keress rá az Everest Form 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 az Everest Form widgetet a vászonra.
3. A Select Form listából válaszd ki az űrlapot.

https://minta-bolt.hu/wp-admin/post.php?post=13&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=13&action=elementor

A képen a szakaszok láthatók: Label, 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

A Label a mezők fölötti szöveg tipográfiáját, színét és a címke és a mező közti térközt állítja.

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-everest-stilus/

A képen a beviteli mezők és az üzenetmező lekerekített, barna szegélyt kaptak. Az Input Fields Styling nem hat az üzenetmezőre, azt a Textarea Fields Styling szakaszban kell külön beállítani.

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 sajátot rajzol, így a választómezők minden böngészőben egyformák. A CheckBox/Radio Field szakasznak két füle van, Check Box és Radio Button, mindkettőn tipográfia, Checked Color, Checked Bg Color, UnChecked Color, UnChecked Bg Color és szegélybeállítások vannak.

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.

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	Az Everest Forms á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

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

A képen az alapállapot látszik: a mezők az Everest Forms saját megjelenésé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, az érvényesítés, az e-mailek és a bejegyzésbeállítások az Everest Formsban 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ó.
• A választómezőket a widget újrarajzolja, ezért minden böngészőben egyformák.

Korlátok

• A widgetben nincs fájlfeltöltő szakasz, ezért az Everest Forms fájlfeltöltő mezője a böngésző saját vezérlőjét kapja.
• 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.
• Az Everest Forms kiegészítők elemeit ezek a szakaszok nem célozzák.

Hibaelhárítás

• A widget nincs az Elementor panelen. Nézd meg, hogy az Everest Forms aktív-e, majd hogy az Everest Form kapcsoló be van-e kapcsolva a The Plus Addons → Widgets oldalon.
• A Select Form lista üres. Hozz létre űrlapot az Everest Forms → Új hozzáadása oldalon, és töltsd újra az Elementor szerkesztőjét.
• A szegély színe nem változik. Kapcsold be a Box Border kapcsolót az adott szakaszban. A Border Style, a Border Width és a Border Color ettől függ.
• Az üzenetmező még mindig stílusozatlan. Használd a Textarea Fields Styling szakaszt. Az Input Fields Styling nem éri el.