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

> Egy meglévő Contact Form 7 űrlap mezőinek, választómezőinek, fájlfeltöltő és küldés gombjának átszabása az Elementor paneljéből.

A Contact Form 7 saját stílusbeállítást nem ad: az űrlap azt veszi át, amit a sablonod a mezőkkel csinál. A **Contact Form 7** widget ezt az Elementor paneljébe hozza. Kiválasztasz egy meglévő űrlapot, és a **Stílus** lapon átszabod a beviteli mezőit, az üzenetmezőt, a jelölőnégyzeteket és a rádiógombokat, a fájlfeltöltő gombot és a küldés gombot. CSS-t nem kell írnod.

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

## Előkészületek

- A **Contact Form 7** bővítmény legyen telepítve és aktív. A widget csak addig létezik, amíg ez a bővítmény aktív: ha kikapcsolod, a widget az Elementorból is eltűnik.
- Legyen legalább egy űrlap a **Kapcsolat → Új hozzáadása** oldalon. A widget nem hoz létre űrlapot, csak a meglévők közül választ.
- Kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá a **Contact Form 7** 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 **Contact Form 7** widgetet a vászonra.
3. A **Content** szakaszban a **Select Form** listából válaszd ki az űrlapot.
4. Az **Alignment** mezővel balra, középre vagy jobbra igazíthatod az űrlapot. Ez eszközönként (asztali gép, tablet, mobil) külön állítható.

![A Contact Form 7 widget Tartalom lapja a Select Form és az Alignment mezővel](./kepek/kozosseg-funkciok-4-cf7-panel-tartalom.webp)

*A Contact Form 7 widget Tartalom lapja a Select Form és az Alignment mezővel* (https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor)

A képen a Tartalom lap látszik: az űrlap kiválasztása és az igazítás.

Az űrlap rögtön megjelenik a vásznon, de egyszerűbbnek látszik, mint a szerkesztőn kívül: a widget eltávolítja a Contact Form 7 által örökölt mezőszegélyeket és háttereket, hogy te építhesd fel a megjelenést.

![Contact Form 7 űrlap stílusbeállítás nélkül: a mezőknek nincs látható széle](./kepek/kozosseg-funkciok-4-cf7-stilus-nelkul.webp)

*Contact Form 7 űrlap stílusbeállítás nélkül: a mezőknek nincs látható széle* (https://minta-bolt.hu/kf4-cf7/)

A képen jól látszik, hogy a beállítás nélküli űrlap mezői láthatatlanok. Ez a kiinduló állapot, nem hiba. Legalább a beviteli mezőket stílusozd meg, különben a látogató nem látja, hová írhat.

## A Stílus lap szakaszai

A panel szakaszainak a neve angolul jelenik meg.

| Szakasz | Mit stílusoz |
|---|---|
| **Input Fields Styling** | Az egysoros mezők: szöveg, e-mail, URL, telefon, szám, dátum és a legördülő lista |
| **Text Area (Message) Field** | A többsoros üzenetmező |
| **CheckBox/Radio Field** | A jelölőnégyzetek és a rádiógombok |
| **File/Upload Field** | A fájlfeltöltő gomb |
| **Outer(Field) Styling** | A mezőket körülvevő sor |
| **Submit/Send Button** | A küldés gomb |
| **Response Message** | A siker-, hiba- és érvényesítési üzenetek az űrlap alatt |
| **Ajax Response** | A betöltésjelző, amíg az űrlap küldése tart |
| **On Scroll View Animation** | Belépő animáció az egész űrlapra, amikor a látogató odagörget |

### Beviteli mezők

Az **Input Fields Styling** minden egysoros mezőt lefed. A beállítások:

- **Padding** és **Margin**, eszközönként külön.
- Tipográfia, **Text Color** és **Placeholder Color**.
- Háttér: egyszínű, színátmenetes vagy kép.
- **Border Options**: előbb kapcsold be a **Box Border** kapcsolót. A **Border Style**, a **Border Width** és a **Border Color** csak bekapcsolt kapcsolónál hat. A **Border Radius** a kapcsolótól függetlenül működik.
- **Normal** és **Focus** fül: a Focus a mező állapota, amíg a látogató beleír, ott külön színt és lekerekítést adhatsz.
- Dobozárnyék, szintén **Normal** és **Focus** állapotra.

### Üzenetmező

A **Text Area (Message) Field** külön szakasz, mert az üzenetmezőnek saját magassága és átméretezése van. A beállításai a beviteli mezőkéivel egyeznek: padding, margin, szövegszín, helyőrző színe, háttér, **Box Border** stílussal, szélességgel és színnel, lekerekítés, **Normal** és **Focus** fül. A mező magasságát is itt állítod.

Az **Input Fields Styling** nem hat az üzenetmezőre. Ha az üzenetmező kilóg a sorból, ennek ez az oka.

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

A Contact Form 7 a böngészőre bízza ezeket, ezért Windowson, macOS-en és Androidon másképp néznek ki. A widget elrejti a böngésző saját vezérlőjét, és a helyére saját elemet rajzol, így mindenhol egyformák.

A **CheckBox/Radio Field** két fülből áll, **Check Box** és **Radio Button**, mindkettőn ugyanazok a beállítások:

- Tipográfia és **Icon Size**.
- **Checked Color** és **Checked Bg Color**: a pipa és a doboza kijelölt állapotban.
- **UnChecked Color** és **UnChecked Bg Color**: ugyanez kijelöletlen állapotban.
- **Check Box Position**: a doboz a felirat előtt vagy után áll. Az alapérték **After** (után).
- **Border Options**: **Box Border**, **Border Style**, **Border Color** és **Border Radius**.

![A CheckBox/Radio Field szakasz a Check Box és a Radio Button füllel](./kepek/kozosseg-funkciok-4-cf7-panel-valasztok.webp)

*A CheckBox/Radio Field szakasz a Check Box és a Radio Button füllel* (https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor)

A képen a **Check Box** fül beállításai láthatók. A **Box Border** alapból ki van kapcsolva.

### Fájlfeltöltő gomb

A Contact Form 7 fájlmezője a böngésző saját fájlválasztója, amit CSS-sel nem lehet megbízhatóan formázni. A widget ezt teljesen elrejti, és a helyére egy gombot rajzol, amit a **File/Upload Field** szakaszban stílusozol: **Padding**, tipográfia, **Min Height Field**, **Text Color**, **Icon Color**, **Alignment**, **Style**, háttér és szegélybeállítások (**Box Border**, **Border Radius**).

![A File/Upload Field szakasz beállításai](./kepek/kozosseg-funkciok-4-cf7-panel-fajl.webp)

*A File/Upload Field szakasz beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=10&action=elementor)

A képen a fájlfeltöltő gomb beállításai látszanak. A gomb felirata a nyilvános oldalon angolul marad („Choose a file...”), mert a widget így írja ki.

### Küldés gomb

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

### Egyéb szakaszok

| Szakasz | Mit állít | Alapérték |
|---|---|---|
| **Extra Options** a Tartalom lapon (**Outer Section Styling**) | Melyik elemet célozza az **Outer(Field) Styling**: az űrlap saját címkesorait, vagy a te `.tp-cf7-outer` osztályodat | **Default Label Field** |
| **Outer(Field) Styling** | A mezőt körülvevő sor: padding, margin, háttér, szegély | nincs beállítva |
| **Response Message** | A siker-, hiba- és érvényesítési üzenetek | nincs beállítva |
| **Ajax Response** | A betöltésjelző az elküldés alatt | nincs beállítva |
| **On Scroll View Animation** | Belépő animáció az egész űrlapra | ki |

## Az eredmény

Az alábbi űrlap a beviteli mezők, az üzenetmező, a választómezők, a fájlgomb és a küldés gomb stílusozása után készült, egyetlen sor egyedi CSS nélkül.

![Contact Form 7 űrlap a nyilvános oldalon, a widget stílusbeállításaival](./kepek/kozosseg-funkciok-4-cf7-stilussal.webp)

*Contact Form 7 űrlap a nyilvános oldalon, a widget stílusbeállításaival* (https://minta-bolt.hu/kf4-cf7-stilus/)

A képen a mezők lekerekített, barna szegélyt kaptak, a választómezők és a fájlgomb a widget saját elemei.

## Működés

- Minden beállítás csak az adott widgetpéldányra érvényes. Ha ugyanazt az űrlapot két widgettel ágyazod be, mindkettőt máshogy stílusozhatod.
- A widget nem nyúl az űrlaphoz: a mezők, az érvényesítés, a levelezési beállítások és a spamvédelem a **Kapcsolat** menüben maradnak.
- A padding, a margin, a tipográfia, az igazítás és a szegélyszélesség eszközönként külön állítható.
- A választómezőket és a fájlgombot a widget újrarajzolja, ezért minden böngészőben egyformák.

## Korlátok

- Stílusbeállítás nélkül a widget eltávolítja a mezők szegélyét és hátterét, tehát a beviteli mezők láthatatlanok. Közzététel előtt legalább az **Input Fields Styling** szakaszt állítsd be.
- 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, és ez megoldja.
- A **Border Style**, a **Border Width** és a **Border Color** addig nem hat, amíg a **Box Border** ki van kapcsolva. Ez minden ilyen szakaszban igaz.
- A widget azt stílusozza, amit a Contact Form 7 maga rajzol. Harmadik féltől származó Contact Form 7 kiegészítők elemeit nem fedi le.

## Hibaelhárítás

- **A widget nincs a panelen.** Nézd meg, hogy a Contact Form 7 aktív-e, majd hogy a **Contact Form 7** kapcsoló be van-e kapcsolva a **The Plus Addons → Widgets** oldalon. A widget csak aktív űrlapbővítménnyel regisztrálódik.
- **A Select Form lista üres.** Még nincs űrlap. Hozz létre egyet a **Kapcsolat → Ú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 abban a szakaszban.
- **A beviteli mezőknek nincs látható széle.** Ez az alapállapot. Adj nekik hátteret, vagy kapcsold be a **Box Border** kapcsolót az **Input Fields Styling** alatt.
- **A pipa helyén üres négyzet van.** A Font Awesome nincs betöltve az oldalon. Tegyél az oldalra bármelyik Elementor ikont, vagy töltsd be a Font Awesome-ot a sablonodból.