# WPForms Styler widget

> A WPForms űrlapok megjelenésének testreszabása: cím, mezőstílus, rádiógomb és jelölőnégyzet, küldés gomb, üzenetek, egysoros űrlap és hibaelhárítás.

A **WPForms Styler** widgettel a WPForms bővítménnyel készített űrlapot az oldalad színeihez igazíthatod, kódolás nélkül. Behúzod a widgetet, kiválasztod az űrlapot, és az Elementor paneljén beállítod a megjelenését.

![A WPForms Styler widget a szerkesztőpanelen](./kepek/urlapok-wpforms-altalanos.webp)

*A WPForms Styler widget a szerkesztőpanelen* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A képen a widget **Tartalom** fülének szakaszai látszanak, az **Általános** szakasz nyitva.

## Mit tud a widget

- saját vagy az űrlapból átvett cím és leírás;
- a cím és a leírás külön formázása;
- kétféle mezőstílus: doboz és aláhúzott;
- a rádiógombok és jelölőnégyzetek teljes testreszabása;
- külön stílus a hibaüzeneteknek és a sikerüzenetnek;
- a küldés gomb színe, színátmenete vagy háttérképe.

## Követelmények

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

1. A **WPForms** 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: a widget az 1.15.0-s kiadástól létezik.
3. A **WPForms Styler** widget be van kapcsolva a bővítmény **Widgetek** beállításainál.

## Az űrlap kiválasztása

Az **Általános** szakaszban az **Űrlap kiválasztása** listából add meg a megjelenítendő WPForms-űrlapot. Ha még nincs űrlapod, a lista erre figyelmeztet.

| Beállítás | Mit csinál |
|---|---|
| **Cím és leírás** | **A WPForms-tól**: az űrlap saját neve és leírása látszik. **Saját megadása**: itt írod be a címet és a leírást. **Nincs**: egyik sem 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. |

## Stílus a Tartalom fülön

### Űrlapmezők

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

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

| Beállítás | Mit csinál |
|---|---|
| **Mező stílusa** | **Doboz**: a mezőt minden oldalról szegély övezi. **Aláhúzott**: csak az alsó oldalán van vonal. |
| **Mező mérete** | Extra kicsi, kicsi, közepes, nagy vagy extra nagy. |
| **Mező padding** | A mező belső térköze. |
| **Mező háttérszíne** | A beviteli mező háttere. |
| **Címke színe**, **Beviteli szöveg / helyőrző színe**, **Alcímke / leírás 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** | Nincs, folytonos, dupla, pontozott vagy szaggatott. |
| **Keret szélessége**, **Szegélyszín**, **Aktív szegély színe** | A szegély vastagsága, színe, és a színe, amikor a mezőbe kattintasz. |
| **Lekerekített sarkok** | A mező sarkainak lekerekítése. |
| **Dobozárnyék** | Árnyék a mező körül. |

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

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

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

Alapból a rádiógombok és a jelölőnégyzetek 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.

#### GDPR-hozzájárulás mező stílusa

Az elfogadás (GDPR-megállapodás) mezőt ugyanitt formázhatod. Előtte kapcsold be a WPForms saját GDPR-bővítéseit: **WPForms → Beállítások**, majd a **GDPR-bővítések** jelölőnégyzet. Ezután az űrlapszerkesztőben felvehetsz **GDPR-megállapodás** mezőt, a stílusát pedig a **Rádiógomb és jelölőnégyzet** szakasz **Aktuális stílus felülbírálása** kapcsolójával állíthatod.

### Küldés gomb

![A Küldés gomb szakasz](./kepek/urlapok-wpforms-kuldes-gomb.webp)

*A Küldés gomb szakasz* (https://minta-bolt.hu/wp-admin/post.php?post=22&action=elementor)

A gomb igazítását, méretét (extra kicsitől extra nagyig) és belső térközét állíthatod. 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, színátmenet vagy kép), a szegély típusát és a keretsugarat. A **Dobozárnyék** a gomb árnyékát adja.

### Sikerüzenet / hibaüzenet

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

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

A **Mezőellenőrzés** csoportban a hibás mezők üzenetét állítod: az **Üzenet stílusa** lehet **Alapértelmezett** vagy **Egyéni**, utóbbinál szín és tipográfia is választható. Az **Űrlap sikerüzenete** csoportban a sikeres küldés után megjelenő üzenet színe, háttere, kerete és betűtípusa állítható.

## Stílus a Stílus fülön

A **Stílus** fül két szakasza:

- **Térközök**: az űrlap elemei közti távolságok;
- **Tipográfia**: az **Űrlap címe** és az **Űrlap leírása** (tipográfia és szín), valamint az **Űrlapmezők** csoport betűtípusai (címke, beviteli szöveg, alcímke / leírás) és a gomb tipográfiája.

## Az eredmény a weboldalon

![A WPForms űrlap a weboldalon](./kepek/urlapok-wpforms-elo.webp)

*A WPForms űrlap a weboldalon* (https://minta-bolt.hu/urlapok-1-teszt/)

A képen az űrlap alapbeállításokkal látszik: a cím, a kötelező mezők csillaggal, a rádiógombok, a jelölőnégyzetek és a küldés gomb.

## Az űrlap megjelenítése egy sorban

A WPForms egysoros űrlapot is tud, és a widget ezt is kezeli. Példa három mezővel (keresztnév, vezetéknév, e-mail):

1. Nyisd meg az űrlapot a WPForms űrlapszerkesztőjében.
2. Menj a **Beállítások → Általános** részre.
3. Az **Űrlap CSS-osztálya** mezőbe írd be: `inline-fields`.
4. Hogy az űrlap alacsonyabb legyen, minden mezőnél add meg a helyőrző szöveget, a **Haladó beállítások** között pedig jelöld be a **Címke elrejtése** lehetőséget.
5. Mentsd az űrlapot. A weboldalon a mezők egy sorban jelennek meg.

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

1. Ellenőrizd, hogy a WPForms bővítmény telepítve és aktív.
2. Nézd meg, hogy a **WPForms Styler** widget be van-e kapcsolva a **Widgetek** beállításainál.
3. Ha így sem látszik, frissítsd a bővítményt a legújabb kiadásra.