# WP Fluent Forms Styler widget

> A Fluent Forms űrlapok megjelenésének testreszabása: cím, mezők, rádiógomb és jelölőnégyzet, csillagos értékelés, szakaszelválasztó, gombok, üzenetek és hibaelhárítás.

A **WP Fluent Forms Styler** widgettel a Fluent Forms bővítménnyel készített űrlapot az oldalad arculatához igazíthatod, a WordPress felületének elhagyása nélkül. Az Elementor szerkesztőjében kiválasztod az űrlapot, és a panelen beállítod a megjelenését.

## Mit tud a widget

- a mezők stílusa;
- saját cím és leírás az űrlaphoz, a Fluent Forms felületére való visszalépés nélkül;
- a rádiógombok és jelölőnégyzetek teljes testreszabása;
- külön stílus a hiba- és a sikerüzenetnek;
- csillagos értékelés, szakaszelválasztó és térközök stílusa, tipográfia;
- a küldés- és a navigációs gombok, valamint a másodlagos gombok stílusa.

## Követelmények

A widget akkor jelenik meg a widgetlistában, ha mindhárom teljesül:

1. A **Fluent Forms** bővítmény telepítve és aktív (**Bővítmények → Telepített bővítmények**).
2. A bővítményed elég új, hogy tartalmazza a widgetet.
3. A **WP Fluent Forms Styler** widget be van kapcsolva a UAE **Widgetek** oldalán.

## Általános

Az **Általános** szakaszban választod ki az űrlapot, és itt adhatsz neki címet.

![A WP Fluent Forms Styler widget Általános szakasza](./kepek/urlapok-fluent-altalanos.webp)

*A WP Fluent Forms Styler widget Általános szakasza* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **Űrlap kiválasztása** | A megjelenítendő Fluent Forms-űrlap. |
| **Cím és leírás** | **Saját megadása**: itt írod be a címet és a leírást, így az űrlapon nem kell módosítanod. Más értékeknél a Fluent Forms űrlap saját szövege vagy semmi nem látszik. |
| **Űrlap címe**, **Űrlap leírása** | Csak a **Saját megadása** értéknél jelennek meg. |
| **Cím és leírás igazítása** | Balra, középre vagy jobbra. |

## Űrlapmezők

A beviteli mezők megjelenését ebben a szakaszban állíthatod, hogy az űrlap illeszkedjen az oldalad stílusához.

![Az Űrlapmezők szakasz beállításai](./kepek/urlapok-fluent-urlapmezok.webp)

*Az Űrlapmezők szakasz beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

| Beállítás | Mit csinál |
|---|---|
| **Stílus** | Például **Doboz**: a mezőt minden oldalról szegély övezi. |
| **Méret** | A mezők mérete. |
| **Padding** | A mező belső térköze. |
| **Háttérszín** | A beviteli mező háttere. |
| **Címke színe**, **Beviteli szöveg / helyőrző színe** | A szövegek színei. |
| **A kötelező mezőket jelölő csillag színe** | A kötelező mező csillagjának színe. |
| **Szegély stílusa**, **Keret szélessége**, **Szegélyszín** | A szegély típusa, vastagsága és színe. |
| **Aktív szegély színe** | A szegély színe, amikor a mezőbe kattintasz. |
| **Lekerekített sarkok** | A sarkok lekerekítése. |

## Rádiógomb és jelölőnégyzet

A rádiógombok és a jelölőnégyzetek alapból az **Űrlapmezők** szakasz beállításait kapják. Ha mást szeretnél, kapcsold be az **Aktuális stílus felülbírálása** kapcsolót: ekkor megjelennek a saját szín- és méretbeállításaik, és bármelyik kinézetet testre szabhatod.

![A Rádiógomb és jelölőnégyzet szakasz](./kepek/urlapok-fluent-radio-jelolonegyzet.webp)

*A Rádiógomb és jelölőnégyzet szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

## Csillagos értékelés

A csillagos értékelés mezőnek is külön stílusa van. Az **Aktuális stílus felülbírálása** kapcsolóval engedélyezheted, hogy a csillagok az alapbeállításoktól eltérő színeket és méreteket kapjanak.

![A Csillagos értékelés szakasz](./kepek/urlapok-fluent-csillag.webp)

*A Csillagos értékelés szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

## Szakaszelválasztó

A hosszú űrlapokban a szakaszelválasztó tagolja a mezőket. Itt a **Cím** és a **Leírás** tipográfiáját és színét állíthatod.

![A Szakaszelválasztó szakasz](./kepek/urlapok-fluent-szakaszelvalaszto.webp)

*A Szakaszelválasztó szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

## Gomb

A **Gomb** szakasz a **Küldés és navigációs gomb** megjelenését adja (többlépéses űrlapoknál a lépések közötti gombokét is), és a többi, másodlagos gombét is.

![A Gomb szakasz](./kepek/urlapok-fluent-gomb.webp)

*A Gomb szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

Beállíthatod a **Küldés gomb igazítását**, a **Méret**et és a **Padding**et. A **Normál** és a **Rámutatás** fülön külön adhatod meg a szöveg színét, a háttér típusát (szín vagy színátmenet), a szegély típusát és a keretsugarat. A **Dobozárnyék** a gomb árnyékát adja.

## Sikerüzenet / hibaüzenet

Miután megírtad az űrlap sikeres és hibás küldéséhez tartozó üzeneteket a Fluent Forms-ban, itt alakíthatod a megjelenésüket.

![A Sikerüzenet / hibaüzenet szakasz](./kepek/urlapok-fluent-uzenetek.webp)

*A Sikerüzenet / hibaüzenet szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=5&action=elementor)

A **Mezőellenőrzés** csoportban a hibás mezők üzenetének **Tipográfia**, **Üzenet színe** és **Padding** beállításait találod. Az **Űrlap sikeres érvényesítése** csoportban a sikeres küldés után megjelenő üzenet **Igazítás**a, **Tipográfia**ja és **Padding**je állítható.

## Hibaelhárítás: nem látom a widgetet

Ellenőrizd sorban:

1. A UAE bővítmény elég új-e, hogy tartalmazza a widgetet.
2. A **Fluent Forms** bővítmény telepítve és aktív-e (**Bővítmények → Telepített bővítmények**).
3. A **WP Fluent Forms Styler** widget be van-e kapcsolva a UAE **Widgetek** oldalán.