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

A Gravity Forms erős űrlapépítő, de a vizuális beállításai a sablonrétegnél véget érnek. Ha egy Gravity-űrlapot a többi oldalhoz kell igazítanod, ez általában a saját osztályneveire írt CSS-t jelenti. A Gravity Form widget ezt az Elementor paneljébe hozza: kiválasztasz egy kész űrlapot, és a Stílus lapon átszabod a címsorait, címkéit, mezőit, legördülő listáit, fájlfeltöltőjét és gombjait.

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 Gravity Forms bővítmény legyen telepítve és aktív. A widget csak addig regisztrálódik, amíg a bővítmény aktív.
• Legyen legalább egy űrlap az Űrlapok → Új űrlap oldalon. A widget nem hoz létre űrlapot.
• Kapcsold be a widgetet: The Plus Addons → Widgets, keress rá a Gravity 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 Gravity Form widgetet a vászonra.
3. A Select Form listából válaszd ki az űrlapot.
4. Döntsd el, hogy az űrlap saját címe látsszon-e: a Title alapból be van kapcsolva.
5. Ha azt szeretnéd, hogy az űrlap az oldal újratöltése nélkül küldődjön el, kapcsold be az Ajax Form Submit kapcsolót. Alapból ki van kapcsolva.

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

A képen a Tartalom lap látszik. Az Extra Options szakasz Compatibility mezőjének két értéke van: Gravity Form (az alapérték, hétköznapi űrlaphoz) és Download Monitor, a Download Monitor bővítményen át megjelenő űrlapokhoz.

A Stílus lap szakaszai

A panel szakaszainak a neve angolul jelenik meg.

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

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

Címsor, leírás és címkék

• Form Heading & Description: az űrlap címének és leírásának színe, a köztük és a mezők között lévő térköz (Bottom space) és az igazítás (Left, Center, Right).
• Heading Styling: az űrlapon belüli szakaszcímek tipográfiája és térközei.
• Label Styling: a mezők fölötti címke tipográfiája, színe és térközei.

Mezők

A Gravity Forms háromféle mezőt rajzol, amelyekhez más-más CSS kell, ezért a widget mindegyikhez külön szakaszt ad:

Szakasz	Mit fed le
Input Fields Styling	Az egysoros mezők: szöveg, e-mail, szám, telefon, URL, dátum
Textarea Fields Styling	A többsoros bekezdésmezők
Select Fields Styling	A legördülő mezők. A Gravity az egyetlen űrlap-styler, amelyiknek külön szakasza van ezekre

Mindhárom szakaszban ugyanazok a beállítások vannak: Padding, Margin, tipográfia, Text Color, Placeholder Color, háttér, Border Options és Border Radius, Normal és Focus fülön.

A Border Style, a Border Width és a Border Color csak akkor hat, ha az adott szakaszban bekapcsoltad a Box Border kapcsolót. A Border Radius kapcsolótól függetlenül működik.

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

A képen a mezők és a legördülő lista lekerekített szegélyt kaptak, a választómezők a widget saját elemei.

Jelölőnégyzetek, rádiógombok és fájlfeltöltő

• CheckBox/Radio Field: a widget elrejti a böngésző saját jelölőnégyzetét és rádiógombját, és sajátot rajzol. Külön Check Box és Radio Button fülön találod a tipográfiát, a Checked Color, Checked Bg Color, UnChecked Color, UnChecked Bg Color beállítást és a szegélyeket.
• File/Upload Field: a böngésző fájlválasztóját egy stílusozható gomb váltja fel. Állítható a padding, a tipográfia, a szöveg- és ikonszín, az igazítás, a háttér és a szegély. A Contact Form 7 mellett a Gravity az egyetlen styler, amelyiknek van ilyen szakasza.

Gombok

A Submit/Next/Previous Button szakasz a Gravity-űrlap mindhárom gombját kezeli: a küldés gombot, valamint a többoldalas űrlap Következő és Előző gombját. Szélesség, padding, margin, tipográfia, szövegszín, háttér, szegély és lekerekítés állítható, 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	A Gravity Forms által kiírt visszaigazoló és érvényesítési üzenetek	nincs beállítva

Működés

• Minden beállítás CSS, amit a widget az adott példányra ír. Ugyanazt az űrlapot kétszer beágyazva két különböző módon stílusozhatod.
• A mezők, a feltételes logika, az értesítések és a visszaigazolások az Űrlapok menüben 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 Ajax Form Submit a Gravity saját AJAX-módja, a widget csak átadja. Amíg be nem kapcsolod, ki van kapcsolva.

Korlátok

• A widget azt stílusozza, amit a Gravity Forms kirajzol. A Gravity Forms kiegészítők saját elemeit nem fedi le.
• A kijelölt jelölőnégyzet pipája Font Awesome-ikon, amit a The Plus Addons maga nem tölt be. Ellenőrizd a pipákat a közzétett oldalon, és ha üres négyzetet látsz, tegyél az oldalra bármelyik Elementor ikont.
• A Border Style, a Border Width és a Border Color minden szakaszban addig nem hat, amíg a Box Border ki van kapcsolva.
• A Download Monitor mód a Download Monitor bővítményt várja. Hétköznapi űrlaphoz hagyd a Compatibility mezőt Gravity Form értéken.

Hibaelhárítás

• A widget nincs a panelen. Nézd meg, hogy a Gravity Forms aktív-e, majd hogy a Gravity Form kapcsoló be van-e kapcsolva a The Plus Addons → Widgets oldalon.
• A Select Form lista üres. Hozz létre űrlapot az Űrlapok → Új űrlap oldalon, és töltsd újra az Elementor szerkesztőjét. Ha a Compatibility értékét Download Monitor-ra állítottad, a lista a Download Monitor űrlapjait mutatja.
• Az űrlap címe kétszer látszik. Kapcsold ki a Title kapcsolót. Alapból be van kapcsolva, ezért egy saját címsorral duplán jelenik meg.
• A szegély színe nem változik. Kapcsold be a Box Border kapcsolót az adott szakaszban.