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

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

Az Everest Forms húzd-és-ejtsd űrlapépítő, de a kész űrlap kinézetét nagyrészt a sablonod határozza meg. Az **Everest Form** widget ezt az Elementor paneljébe hozza: kiválasztasz egy kész űrlapot, és a **Stílus** lapon átszabod a címkéit, mezőit, választómezőit és a küldés gombját, CSS nélkül.

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

- Az **Everest Forms** bővítmény legyen telepítve és aktív. A widget a **The Plus Addons → Widgets** oldalon csak addig látszik, amíg ez a bővítmény aktív.
- Legyen legalább egy űrlap az **Everest Forms → Új hozzáadása** oldalon. A **Select Form** lista csak a meglévő űrlapokat mutatja.
- Kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá az **Everest Form** 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 az **Everest Form** widgetet a vászonra.
3. A **Select Form** listából válaszd ki az űrlapot.

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

*Az Everest Form widget Tartalom lapja a Select Form mezővel* (https://minta-bolt.hu/wp-admin/post.php?post=13&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.

![Az Everest Form widget Stílus lapja a szakaszok listájával](./kepek/kozosseg-funkciok-4-everest-panel-stilus.webp)

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

A képen a szakaszok láthatók: **Label**, **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

A **Label** a mezők fölötti szöveg tipográfiáját, színét és a címke és a mező közti térközt állítja.

### 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.

![Everest Forms űrlap a nyilvános oldalon, a mezők stílusozása után](./kepek/kozosseg-funkciok-4-everest-stilussal.webp)

*Everest Forms űrlap a nyilvános oldalon, a mezők stílusozása után* (https://minta-bolt.hu/kf4-everest-stilus/)

A képen a beviteli mezők és az üzenetmező lekerekített, barna szegélyt kaptak. Az **Input Fields Styling** nem hat az üzenetmezőre, azt a **Textarea Fields Styling** szakaszban kell külön beállítani.

### 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 sajátot rajzol, így a választómezők minden böngészőben egyformák. A **CheckBox/Radio Field** szakasznak két füle van, **Check Box** és **Radio Button**, mindkettőn tipográfia, **Checked Color**, **Checked Bg Color**, **UnChecked Color**, **UnChecked Bg Color** és szegélybeállítások vannak.

### 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.

### 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** | Az Everest Forms á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

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

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

A képen az alapállapot látszik: a mezők az Everest Forms saját megjelenésé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, az érvényesítés, az e-mailek és a bejegyzésbeállítások az Everest Formsban 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ó.
- A választómezőket a widget újrarajzolja, ezért minden böngészőben egyformák.

## Korlátok

- A widgetben nincs fájlfeltöltő szakasz, ezért az Everest Forms fájlfeltöltő mezője a böngésző saját vezérlőjét kapja.
- 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.
- Az Everest Forms kiegészítők elemeit ezek a szakaszok nem célozzák.

## Hibaelhárítás

- **A widget nincs az Elementor panelen.** Nézd meg, hogy az Everest Forms aktív-e, majd hogy az **Everest Form** kapcsoló be van-e kapcsolva a **The Plus Addons → Widgets** oldalon.
- **A Select Form lista üres.** Hozz létre űrlapot az **Everest Forms → Új hozzáadása** oldalon, és töltsd újra az Elementor szerkesztőjét.
- **A szegély színe nem változik.** Kapcsold be a **Box Border** kapcsolót az adott szakaszban. A **Border Style**, a **Border Width** és a **Border Color** ettől függ.
- **Az üzenetmező még mindig stílusozatlan.** Használd a **Textarea Fields Styling** szakaszt. Az **Input Fields Styling** nem éri el.