Űrlapstílus-szerkesztő (Styler)

Az űrlapstílus-szerkesztővel kódolás nélkül igazíthatod az űrlapot az oldalad arculatához. Ha ennél finomabb beállítás kell, használhatsz saját CSS-t is (Egyéni CSS és JavaScript). A szerkesztő a Pro bővítmény része.

A szerkesztő megnyitása

1. Nyisd meg vagy hozd létre az űrlapot, és mentsd el.
2. Kattints a jobb felső Előnézet és tervezés gombra.
3. Az előnézet jobb oldalán megjelenik a stílus panelje, bal oldalon az űrlap élő képe. A tetején az eszköz ikonjaival asztali, tablet és mobil nézetet is választhatsz.

A panel három fülre oszlik: Általános, Egyéb és Importálás. A módosításokat a Beállítások mentése gombbal mented.

Általános fül

Az Űrlapstílus-sablon legördülő menüben egy kész stílust választasz:

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

A képen a választható sablonok látszanak: Alapértelmezett, Modern (félkövér), Modern (világos), Klasszikus, Bootstrap-stílus, Sablonstílus átvétele (az űrlap a téma saját stílusát veszi át) és Egyéni (Speciális testreszabás).

Ha az A kiválasztott előre beállított stílus testreszabása négyzetet bekapcsolod, a kiválasztott sablon részeit 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 lenyitható blokkok látszanak. Mindegyik a saját elemcsoportját stílusozza:

Blokk	Mit állíthatsz
Címke stílusai	A mezőcímkék Színe és Tipográfiaja: betűméret, vastagság, szövegdísz, sormagasság, betűköz.
Beviteli mező és szövegterület	Háttér- és szövegszín, tipográfia, a mezők árnyéka. A Fókuszban állapotra külön stílust adhatsz, ugyanazokkal a lehetőségekkel.
Helykitöltő	A helykitöltő szöveg színe és tipográfiája.
Rádiógomb és jelölőnégyzet stílusa	Az intelligens felület (Smart UI) bekapcsolásakor három stílusbeállítást kapsz: a bejelölt elem szegélyének, elemének és hátterének színét. Az egyéni szegélystílust külön kapcsolóval engedélyezheted.
Képfeltöltő vagy fájlgomb stílusa	A feltöltőgomb háttér- és szövegszíne, tipográfiája, szegélye és árnyéka, külön Normál és Lebegő (egérrel fölé mutatáskor) állapotra.
Küldés gomb stílusa	A beküldő gomb színei, tipográfiája, szegélye és árnyéka, szintén Normál és Lebegő állapotra. Az alapértelmezett gomb élénk kék. Ugyanezek a beállítások érvényesek a többlépéses űrlap Következő és Előző gombjára is.

Egyéb fül

Itt az űrlap egészét és az üzeneteit formázod:

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

Blokk	Mit állíthatsz
Konténer stílusai	Az űrlap burkolójának háttere, szegélye, belső és külső térköze (padding, margin), árnyéka. Itt kapcsolhatod be az űrlap szegélyét is: típus, szín, vastagság és lekerekítés.
Csillag stílusai	A kötelező mezők csillagjának színe.
Soron belüli hibaüzenet stílusai	A mezők alatti hibaüzenetek színe és tipográfiája.
Beküldés utáni sikerüzenet stílusai	A sikerüzenet háttere, szövegszíne, tipográfiája, árnyéka és egyéni szegélye. A kinézetet úgy a legkönnyebb ellenőrizni, ha az előnézetben kitöltöd és elküldöd az űrlapot.
Beküldés utáni hibaüzenet stílusai	A beküldés utáni hibaüzenet ugyanazokkal a beállításokkal, mint a sikerüzenet.

Importálás fül

Az Importálás fülön meglévő stílust vehetsz át:

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

• Stílusok Importálása Egy Másik Űrlapról: válassz egy meglévő űrlapot, és annak stílusát átveszi az aktuális űrlap.
• Fluent Form-stílus importálása: tölts fel egy korábban exportált stílusfájlt, majd kattints az Importálás gombra.

Tippek

• Az elrendezés alapbeállításait (címke helye, üzenetek helye, csillag) nem itt, hanem az űrlapelrendezésnél adod meg.
• Ne felejtsd el menteni a változtatásokat, mielőtt elhagyod az előnézetet.