# WPForms widget: űrlap stílusozása CSS nélkül

> Egy meglévő WPForms űrlap címkéinek, mezőinek, választógombjainak és küldés gombjának átszabása az Elementor paneljéből.

A WPForms ingyenes változata alig ad beleszólást abban, hogyan néz ki a kész űrlap: a mezők megjelenése a sablonodtól függ, és átszabásukhoz általában egyedi CSS kell. A **WPForms** widget ezt az Elementor paneljébe hozza. Kiválasztasz egy meglévő űrlapot, és a **Stílus** lapon átszabod a címkéit, mezőit, választómezőit és a küldés gombját.

A widget az ingyenes bővítményben van, a Pro-hoz nem kell, és az Elementor ingyenes változata is elég hozzá.

## Előkészületek

- A **WPForms** bővítmény legyen telepítve és aktív. A widget csak ekkor jelenik meg a panelen.
- Legyen legalább egy űrlap a **WPForms → Új hozzáadása** oldalon. A widget nem hoz létre űrlapot.
- Kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá a **WPForms** szóra, és kapcsold be a kapcsolóját.

## A widget hozzáadása és az űrlap kiválasztása

1. Szerkeszd az oldalt Elementorral.
2. Húzd a **WPForms** widgetet a vászonra.
3. A **WPForms** szakaszban a **Select Form** listából válaszd ki az űrlapot.
4. A **Display Options** szakaszban döntsd el, hogy az űrlap neve (**Form Name**) és leírása (**Form Description**) látsszon-e a mezők fölött. Mindkettő alapból **Hide**, tehát a widget csak a mezőket mutatja.

![A WPForms widget Tartalom lapja a Select Form mezővel](./kepek/kozosseg-funkciok-4-wpforms-panel-tartalom.webp)

*A WPForms widget Tartalom lapja a Select Form mezővel* (https://minta-bolt.hu/wp-admin/post.php?post=11&action=elementor)

A képen a Tartalom lap látszik, az űrlap kiválasztásával.

## A Stílus lap szakaszai

A panel szakaszainak a neve angolul jelenik meg.

![A WPForms widget Stílus lapja a szakaszok listájával](./kepek/kozosseg-funkciok-4-wpforms-panel-stilus.webp)

*A WPForms widget Stílus lapja a szakaszok listájával* (https://minta-bolt.hu/wp-admin/post.php?post=11&action=elementor)

A képen a szakaszok láthatók: **Label**, **Description Text**, **Input Fields Styling**, **Textarea Fields Styling**, **CheckBox/Radio Field**, **Submit/Send Button**, **Outer Field**, **Form Container**, **Response Message**, **Extra Option** és **On Scroll View Animation**.

### Címkék és leírások

A WPForms minden mező fölé címkét ír, alá pedig, ha megadtad, rövid leírást. Mindkettőnek külön szakasza van:

- **Label**: a címke tipográfiája, színe és margója, a belső (al)címkék tipográfiája és színe, valamint a kötelező mező csillagának színe.
- **Description Text**: a kisebb súgószöveg tipográfiája, színe, hátterének és szegélyének beállításai, valamint a térközei.

### Beviteli mezők és üzenetmező

Az **Input Fields Styling** az egysoros mezőket fedi le: szöveg, e-mail, szám, telefon, URL és legördülő lista. A **Textarea Fields Styling** a többsoros mezőket. A két szakasz beállításai megegyeznek:

- **Padding** és **Margin**, eszközönként külön.
- Tipográfia, **Text Color** és **Placeholder Color**.
- Háttér: szín, színátmenet vagy kép.
- **Border Options**: előbb kapcsold be a **Box Border** kapcsolót, csak utána hat a **Border Style**, a **Border Width** és a **Border Color**. A **Border Radius** kapcsolótól függetlenül működik.
- **Normal** és **Focus** fül: a Focus a mező állapota gépelés közben.

![WPForms űrlap a nyilvános oldalon, a mezők és a választómezők stílusozása után](./kepek/kozosseg-funkciok-4-wpforms-stilussal.webp)

*WPForms űrlap a nyilvános oldalon, a mezők és a választómezők stílusozása után* (https://minta-bolt.hu/kf4-wpforms-stilus/)

A képen a mezők lekerekített szegélyt kaptak, az üzenetmező és a választómezők külön szakaszban stílusozhatók.

### Küldés gomb

A **Submit/Send Button** szakaszban szélességet, paddingot, margót, tipográfiát, szövegszínt, hátteret, szegélyt és lekerekítést állíthatsz, **Normal** és **Hover** fülön külön.

### Jelölőnégyzetek és rádiógombok

A widget elrejti a böngésző saját jelölőnégyzetét és rádiógombját, és a helyére sajátot rajzol, így az űrlap minden böngészőben egyformán néz ki. A **CheckBox/Radio Field** szakasznak két füle van, **Check Box** és **Radio Button**, mindkettőn ugyanazok a beállítások:

- Tipográfia és **Text Color** a lehetőségek feliratához.
- **Checked Color** és **Checked Bg Color** a kijelölt állapotra.
- **UnChecked Color** és **UnChecked Bg Color** a többire.
- **Box Border**, **Border Style** és **Border Color**.

Ha az űrlapod a WPForms képes válaszlehetőségeit használja sima szöveges lehetőségek helyett, kapcsold be ugyanebben a szakaszban a **Must use image choices in WPForms** kapcsolót. Ekkor megjelenik az **Image Checkbox Normal**, az **Image Checkbox Selected** és a rádiógombokra ugyanilyen pár, amelyek a képcsempéket stílusozzák, nem a dobozokat.

### Egyéb szakaszok

| Szakasz | Mit stílusoz | Alapérték |
|---|---|---|
| **Outer Field** | A mezőket körülvevő sor: padding, margin, háttér, szegély | nincs beállítva |
| **Form Container** | Az egész űrlapot körülvevő doboz: padding, háttér, szegély, lekerekítés, árnyék | nincs beállítva |
| **Response Message** | A WPForms által kiírt visszaigazoló és érvényesítési üzenetek | nincs beállítva |
| **On Scroll View Animation** | Belépő animáció az egész űrlapra, amikor a látogató odagörget | ki |

## Az eredmény

Stílusbeállítás nélkül a WPForms az alapmegjelenését kapja, a widget a megadott értékeket írja rá.

![WPForms űrlap a nyilvános oldalon stílusbeállítás nélkül](./kepek/kozosseg-funkciok-4-wpforms-stilus-nelkul.webp)

*WPForms űrlap a nyilvános oldalon stílusbeállítás nélkül* (https://minta-bolt.hu/kf4-wpforms/)

A képen az alapállapot látszik: a mezők a WPForms saját stílusát viselik.

## Működés

- A widget csak a saját példányára ír CSS-t. Ugyanazt az űrlapot két widgettel beágyazva két különböző módon stílusozhatod.
- A mezők, a logika, az értesítések és a visszaigazolások a WPForms-ban maradnak. A widget soha nem szerkeszti az űrlapot.
- A padding, a margin, a tipográfia és a szegélyszélesség eszközönként külön állítható.

## Korlátok

- A widgetben nincs fájlfeltöltő szakasz, ezért a WPForms fájlfeltöltő mezői a böngésző saját vezérlőjét kapják.
- A kijelölt jelölőnégyzet pipája Font Awesome-ikon, amit a The Plus Addons maga nem tölt be. Ha az oldalon nincs más ikon, a pipa üres négyzetként jelenhet meg. Bármelyik Elementor ikon widget az oldalon betölti a betűkészletet.
- A **Border Style**, a **Border Width** és a **Border Color** addig nem hat, amíg a **Box Border** ki van kapcsolva.
- A WPForms kiegészítők elemeit ezek a szakaszok nem célozzák.

## Hibaelhárítás

- **A widget nincs a panelen.** Nézd meg, hogy a WPForms aktív-e, majd hogy a **WPForms** kapcsoló be van-e kapcsolva a **The Plus Addons → Widgets** oldalon.
- **A Select Form lista üres.** Hozz létre egy űrlapot a **WPForms → Új hozzáadása** oldalon, és töltsd újra az Elementor szerkesztőjét.
- **Az űrlap címe mindig látszik, vagy sosem.** Ezt a **Display Options → Form Name** állítja, nem a WPForms. Alapból **Hide**.
- **A képes válaszlehetőségeim nincsenek stílusozva.** Kapcsold be a **Must use image choices in WPForms** kapcsolót a **CheckBox/Radio Field** alatt. A képes beállítások addig rejtve vannak.