# Űrlapelrendezés és stílusszerkesztő

> A címkék, súgó- és hibaüzenetek, csillag helye az űrlapon, valamint az űrlap kinézetének beállítása a stílusszerkesztőben.

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](https://hub.hellowp.io/hu/plugins/fluentform-signature/megjelenes-beagyazas-egyeni-css/) 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.

![Az Űrlapelrendezés kártya a négy legördülő menüvel](./kepek/megjelenes-beagyazas-1-urlapelrendezes.webp)

*Az Űrlapelrendezés kártya a négy legördülő menüvel* (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](https://hub.hellowp.io/hu/plugins/fluentform-signature/urlap-beallitasok-uzenetek/) 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.

![A stílusszerkesztő az előnézettel és a jobb oldali panellel](./kepek/megjelenes-beagyazas-1-stilusszerkeszto.webp)

*A stílusszerkesztő az előnézettel és a jobb oldali panellel* (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.

![Az Általános fül a bekapcsolt testreszabással és a lenyitható szakaszokkal](./kepek/megjelenes-beagyazas-1-stilus-testreszabas.webp)

*Az Általános fül a bekapcsolt testreszabással és a lenyitható szakaszokkal* (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.

![Az Egyéb fül lenyitható szakaszai](./kepek/megjelenes-beagyazas-1-stilus-egyeb.webp)

*Az Egyéb fül lenyitható szakaszai* (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.

![Az Importálás fül](./kepek/megjelenes-beagyazas-1-stilus-import.webp)

*Az Importálás fül* (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.