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

A Ninja Forms gyorsan épít űrlapot, de a saját stílusbeállításai szűkösek, és a kész űrlap általában azt kapja, amit a sablonod a mezőkkel csinál. A Ninja Form widget a címkéket, az egysoros mezőket, az üzenetmezőket, a jelölőnégyzeteket és a rádiógombokat az Elementor panelből stílusozza, CSS nélkül. Egy gyorsítótár-beállítást is át kell állítani, hogy az űrlap az első látogatás után is megmaradjon, erről lejjebb írunk.

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 Ninja 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 a Ninja 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á a Ninja 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 a Ninja Form widgetet a vászonra.
3. A Ninja Form szakaszban a Select Form listából válaszd ki az űrlapot.

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

A képen a Tartalom lap látszik. Az Elementor vászna az űrlap kiválasztása után is üres marad: az űrlapot az előnézetben vagy a közzétett oldalon látod.

Az űrlap eltűnése az első látogatás után

Az Elementor alapból gyorsítótárba teszi a widgetek kimenetét. Ha ezt a widgetet a gyorsítótárból szolgálja ki, a Ninja Forms saját szkriptjei nem töltődnek be, és az oldalon egyáltalán nincs űrlap. Csak a gyorsítótár ürítése utáni első látogatás mutatja. Kapcsold ki a gyorsítótárat erre a widgetre:

1. Jelöld ki a Ninja Form widgetet.
2. Nyisd meg a Haladó lap Elrendezés szakaszát (angolul Advanced → Layout).
3. Állítsd a Cache Settings mezőt Inactive értékre.
4. Kattints a Frissítés gombra.

Az egész webhelyre is kikapcsolhatod: Elementor → Beállítások → Teljesítmény, az Element Cache mező Disable. Ez minden widgetet érint, ezért a widgetenkénti beállítás általában jobb.

A Stílus lap szakaszai

A panel szakaszainak a neve angolul jelenik meg.

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

A képen a szakaszok láthatók: Form Heading, Field Hint, Label Styling, 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 Styling a mezők fölötti címke tipográfiáját, színét és margóját állítja, például a Név, az E-mail vagy az Üzenet fölött. A rádiógomb- vagy jelölőnégyzet-csoport címe a saját stílusát tartja.

Beviteli mezők és üzenetmező

Az Input Fields Styling az egysoros mezőket fedi le: szöveg, e-mail, szám, telefon é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.

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

A képen a mezők és az üzenetmező lekerekített szegélyt kaptak. A küldés gomb a Ninja Forms saját megjelenését tartja.

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

1. A WordPress admin felületén nyisd meg a Ninja Forms beállításait (Ninja Forms → Settings).
2. Az Advanced Settings alatt állítsd az Opinionated Styles mezőt Light vagy Dark értékre, és mentsd.
3. Térj vissza az Elementorba, és nyisd meg a Stílus → CheckBox/Radio Field szakaszt. A Check Box és a Radio Button fülön a lehetőségek szövegének színét, valamint a dobozok és körök kijelölt és kijelöletlen színét állítod.

A dobozokat és köröket a Ninja Forms saját stílusa rajzolja. Ha az Opinionated Styles értéke None, a böngésző sima jelölőnégyzetei látszanak, és csak a lehetőségek szövegének színe változik.

Küldés gomb és a többi szakasz

A küldés gomb a Ninja Forms saját megjelenését kapja. A színeit a Ninja Forms Opinionated Styles beállításával változtathatod. A Form Heading, a Field Hint, az Outer Field, a Form Container és a Response Message szakasz is a panelen van, de a kipróbált képernyőn a küldés gombon és az űrlap körüli dobozon nem látszott változás, ezért ezekre ne építs.

Az eredmény

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

A képen az alapállapot látszik: a mezők a Ninja Forms saját megjelenését viselik.

Működés

• A mezők, a műveletek és az e-mail-beállítások a Ninja 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ó.
• Az Elementor vásznán nem jelenik meg az űrlap: a munkádat az előnézettel vagy a közzétett oldalon ellenőrizd.

Korlátok

• Bekapcsolt Elementor-elemgyorsítótárral az űrlap az első látogatás után eltűnik. Állítsd a widget Cache Settings mezőjét Inactive értékre.
• Az űrlap nem rajzolódik ki az Elementor szerkesztőjében, a vászon üres marad, amíg elő nem nézed vagy közzé nem teszed az oldalt.
• A jelölőnégyzetek és rádiógombok stílusozásához a Ninja Forms Opinionated Styles beállítása Light vagy Dark legyen.
• A widgetben nincs fájlfeltöltő szakasz, ezért a Ninja Forms fájlfeltöltő mezője a böngésző saját vezérlőjét kapja.
• A Border Style, a Border Width és a Border Color addig nem hat, amíg a Box Border ki van kapcsolva.

Hibaelhárítás

• A widget nincs az Elementor panelen. Nézd meg, hogy a Ninja Forms aktív-e, majd hogy a Ninja Form kapcsoló be van-e kapcsolva a The Plus Addons → Widgets oldalon.
• A vászon üres az űrlap kiválasztása után. Az űrlap nem jelenik meg az Elementor vásznán. Nézd meg az előnézetben vagy a közzétett oldalon.
• Az űrlap egyszer látszik, utána üres az oldal. Az Elementor a gyorsítótárból szolgálja ki a widgetet. Állítsd a Cache Settings mezőt Inactive értékre a widgeten, és frissítsd az oldalt.
• A küldés gomb nem változik. Állítsd át a gombot a Ninja Forms Opinionated Styles beállításával.
• A jelölőnégyzetek színe nem változik. Állítsd a Ninja Forms → Settings → Advanced Settings → Opinionated Styles mezőt Light vagy Dark értékre.
• A szegély színe nem változik. Kapcsold be a Box Border kapcsolót az adott szakaszban.