Űrlapelrendezés és stílusszerkesztő

Az űrlap kinézetét két helyen állíthatod: az Űrlapelrendezés a mezők alapvető elrendezését adja meg (hol legyen a címke, a súgó, a hibaüzenet és a csillag), a stílusszerkesztő pedig a színeket, betűket, szegélyeket és gombokat. Ha ennél finomabb beállítás kell, használhatsz egyéni CSS-t is (lásd az Egyéni CSS és kész osztályok fejezetet).

Űrlapelrendezés

A beállítás az űrlap saját beállításai között van.

1. Nyisd meg az űrlapot: Fluent Forms → Űrlapok, majd a Szerkesztő fül.
2. Kattints a Beállítások és integrációk fülre.
3. A bal oldali menüben a Beállítások alatt válaszd az Űrlapelrendezés almenüt.
4. Állítsd be a négy legördülő menüt, majd mentsd a beállításokat.

https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=1&route=settings&sub_route=form_settings

A képen a kártya négy beállítása látszik egymás mellett: Címke igazítása, Súgóüzenet pozíciója, Hibaüzenet pozíciója és Csillag pozíciója.

Beállítás	Választható értékek
Címke igazítása	Top (a mező fölött), Left (a mezőtől balra), Right (a mezőtől jobbra)
Súgóüzenet pozíciója	Címke mellett (eszköztipp): a súgó a címke melletti buborékban jelenik meg. Beviteli mezők alatt: a mező alatt. Fókuszálás az elemre: akkor látszik, amikor a mezőbe kattintasz. Mező előtt: a beviteli mező előtt.
Hibaüzenet pozíciója	Beviteli mezők alatt: a hibás mező alatt. Űrlap után egymás alatt: az összes hibaüzenet a küldés gomb után, egymás alatt.
Csillag pozíciója	Nincs: nem jelenik meg csillag. A címkétől balra vagy A címkétől jobbra: a kötelező mezők címkéje mellett.

Ugyanezek az alapértékek az összes új űrlapra globálisan is beállíthatók (lásd a Hibaüzenetek és súgóüzenetek fejezetet). Az űrlap saját beállítása felülírja a globálisat.

A stílusszerkesztő megnyitása

A stílusszerkesztő a Fluent Forms Pro része. Nyisd meg az űrlapot, mentsd el, majd kattints a jobb felső sarokban az Előnézet és tervezés gombra. Az előnézet jobb oldalán lévő panelnek három füle van: Általános, Egyéb és Importálás. A Beállítások mentése gombbal véglegesíted a változtatásokat. A felső ikonokkal asztali, tábla- és mobilnézetben is megnézheted az űrlapot.

https://minta-bolt.hu/?fluent_forms_pages=1&design_mode=1&preview_id=1

A képen bal oldalon az élő előnézet, jobb oldalon az Általános fül látszik az Űrlapstílus-sablon választóval.

Általános fül

Az Űrlapstílus-sablon listából kész stílust választhatsz: Alapértelmezett, Modern (félkövér), Modern (világos), Klasszikus, Bootstrap-stílus, Sablonstílus átvétele (a téma stílusát örökli az űrlap) és Egyéni (Speciális testreszabás). A A kiválasztott előre beállított stílus testreszabása jelölőnégyzettel az egyes részeket külön is átállíthatod.

https://minta-bolt.hu/?fluent_forms_pages=1&design_mode=1&preview_id=1

A képen a testreszabás bekapcsolása után megjelenő szakaszok látszanak: Címke stílusai, Beviteli mező és szövegterület, Helykitöltő, Rádiógomb és jelölőnégyzet stílusa és Küldés gomb stílusa.

Szakasz	Mit állíthatsz
Címke stílusai	A címkék színe és tipográfiája: betűméret, betűvastagság, átalakítás (nagybetűs, kisbetűs, nagy kezdőbetűs), betűstílus, szövegdekoráció, sormagasság, betűköz, szavak közötti térköz.
Beviteli mező és szövegterület	Szín, háttérszín, belső (padding) és külső (margó) térköz, tipográfia, dobozárnyék, saját szegély (Use custom Border style). Külön beállítható a mező fókuszban lévő állapota is.
Helykitöltő	A mezőkben látszó helykitöltő szöveg színe és tipográfiája.
Rádiógomb és jelölőnégyzet stílusa	Az elemek színe és mérete. A Smart UI engedélyezése bekapcsolásakor külön adhatod meg a kijelölt állapot szegélyének, elemének és hátterének színét.
Küldés gomb stílusa	Igazítás, szín, háttérszín, gombmagasság, szélesség, térközök, tipográfia, dobozárnyék, saját szegély. Normál és egérrel fölé vitt (hover) állapotban is.

A küldés gomb beállításai ugyanazok, mint a többlépéses űrlap Következő és Előző gombjáéi. A fájl- és képfeltöltő gombot is testre szabhatod: háttér, szövegszín, tipográfia, szegély és árnyék, normál és hover állapotra külön. A küldés gomb alapszíne élénk kék, ezt itt átállíthatod az oldalad színeire.

Egyéb fül

Az Egyéb fül az űrlap kereteit és üzeneteit stílusozza.

https://minta-bolt.hu/?fluent_forms_pages=1&design_mode=1&preview_id=1

A képen az öt szakasz látszik: Konténer stílusai, Csillag stílusai, Soron belüli hibaüzenet stílusai, Beküldés utáni sikerüzenet stílusai és Beküldés utáni hibaüzenet stílusai.

Szakasz	Mit állíthatsz
Konténer stílusai	Háttérkép és háttérszín, belső és külső térköz, dobozárnyék, az Enable Form Border bekapcsolásával keret (típus, szín, vastagság, lekerekítés).
Csillag stílusai	A kötelező mezők csillagának színe.
Soron belüli hibaüzenet stílusai	A mező alatti hibaüzenet színe, igazítása, térköze és tipográfiája.
Beküldés utáni sikerüzenet stílusai	A sikerüzenet színe, háttere, igazítása, szélessége, térközei, tipográfiája, árnyéka és szegélye. A beállítás közben töltsd ki és küldd be az űrlapot, hogy lásd az eredményt.
Beküldés utáni hibaüzenet stílusai	Ugyanazok a beállítások, mint a sikerüzenetnél, a beküldés utáni hibaüzenetre.

Importálás fül

Az Importálás fülön egy másik űrlap stílusát veheted át, vagy saját stílusfájlt tölthetsz be.

https://minta-bolt.hu/?fluent_forms_pages=1&design_mode=1&preview_id=1

A képen a két lehetőség látszik: egy meglévő űrlap kiválasztása a stílus alkalmazásához, illetve a Fluent Form-stílus importálása fájlfeltöltővel és az Importálás gombbal.