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

> Egy meglévő Gravity Forms űrlap címsorának, címkéinek, mezőinek, legördülő listáinak, fájlfeltöltő és léptető gombjainak átszabása az Elementor paneljéből.

A Gravity Forms erős űrlapépítő, de a vizuális beállításai a sablonrétegnél véget érnek. Ha egy Gravity-űrlapot a többi oldalhoz kell igazítanod, ez általában a saját osztályneveire írt CSS-t jelenti. A **Gravity Form** widget ezt az Elementor paneljébe hozza: kiválasztasz egy kész űrlapot, és a **Stílus** lapon átszabod a címsorait, címkéit, mezőit, legördülő listáit, fájlfeltöltőjét és gombjait.

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 **Gravity Forms** bővítmény legyen telepítve és aktív. A widget csak addig regisztrálódik, amíg a bővítmény aktív.
- Legyen legalább egy űrlap az **Űrlapok → Új űrlap** oldalon. A widget nem hoz létre űrlapot.
- Kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá a **Gravity 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 a **Gravity Form** widgetet a vászonra.
3. A **Select Form** listából válaszd ki az űrlapot.
4. Döntsd el, hogy az űrlap saját címe látsszon-e: a **Title** alapból be van kapcsolva.
5. Ha azt szeretnéd, hogy az űrlap az oldal újratöltése nélkül küldődjön el, kapcsold be az **Ajax Form Submit** kapcsolót. Alapból ki van kapcsolva.

![A Gravity Form widget Tartalom lapja a Select Form, a Title és az Ajax Form Submit mezővel](./kepek/kozosseg-funkciok-4-gravity-panel-tartalom.webp)

*A Gravity Form widget Tartalom lapja a Select Form, a Title és az Ajax Form Submit mezővel* (https://minta-bolt.hu/wp-admin/post.php?post=12&action=elementor)

A képen a Tartalom lap látszik. Az **Extra Options** szakasz **Compatibility** mezőjének két értéke van: **Gravity Form** (az alapérték, hétköznapi űrlaphoz) és **Download Monitor**, a Download Monitor bővítményen át megjelenő űrlapokhoz.

## A Stílus lap szakaszai

A panel szakaszainak a neve angolul jelenik meg.

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

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

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

### Címsor, leírás és címkék

- **Form Heading & Description**: az űrlap címének és leírásának színe, a köztük és a mezők között lévő térköz (**Bottom space**) és az igazítás (**Left**, **Center**, **Right**).
- **Heading Styling**: az űrlapon belüli szakaszcímek tipográfiája és térközei.
- **Label Styling**: a mezők fölötti címke tipográfiája, színe és térközei.

### Mezők

A Gravity Forms háromféle mezőt rajzol, amelyekhez más-más CSS kell, ezért a widget mindegyikhez külön szakaszt ad:

| Szakasz | Mit fed le |
|---|---|
| **Input Fields Styling** | Az egysoros mezők: szöveg, e-mail, szám, telefon, URL, dátum |
| **Textarea Fields Styling** | A többsoros bekezdésmezők |
| **Select Fields Styling** | A legördülő mezők. A Gravity az egyetlen űrlap-styler, amelyiknek külön szakasza van ezekre |

Mindhárom szakaszban ugyanazok a beállítások vannak: **Padding**, **Margin**, tipográfia, **Text Color**, **Placeholder Color**, háttér, **Border Options** és **Border Radius**, **Normal** és **Focus** fülön.

A **Border Style**, a **Border Width** és a **Border Color** csak akkor hat, ha az adott szakaszban bekapcsoltad a **Box Border** kapcsolót. A **Border Radius** kapcsolótól függetlenül működik.

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

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

A képen a mezők és a legördülő lista lekerekített szegélyt kaptak, a választómezők a widget saját elemei.

### Jelölőnégyzetek, rádiógombok és fájlfeltöltő

- **CheckBox/Radio Field**: a widget elrejti a böngésző saját jelölőnégyzetét és rádiógombját, és sajátot rajzol. Külön **Check Box** és **Radio Button** fülön találod a tipográfiát, a **Checked Color**, **Checked Bg Color**, **UnChecked Color**, **UnChecked Bg Color** beállítást és a szegélyeket.
- **File/Upload Field**: a böngésző fájlválasztóját egy stílusozható gomb váltja fel. Állítható a padding, a tipográfia, a szöveg- és ikonszín, az igazítás, a háttér és a szegély. A Contact Form 7 mellett a Gravity az egyetlen styler, amelyiknek van ilyen szakasza.

### Gombok

A **Submit/Next/Previous Button** szakasz a Gravity-űrlap mindhárom gombját kezeli: a küldés gombot, valamint a többoldalas űrlap **Következő** és **Előző** gombját. Szélesség, padding, margin, tipográfia, szövegszín, háttér, szegély és lekerekítés állítható, **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** | A Gravity Forms által kiírt visszaigazoló és érvényesítési üzenetek | nincs beállítva |

## Működés

- Minden beállítás CSS, amit a widget az adott példányra ír. Ugyanazt az űrlapot kétszer beágyazva két különböző módon stílusozhatod.
- A mezők, a feltételes logika, az értesítések és a visszaigazolások az **Űrlapok** menüben 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ó.
- Az **Ajax Form Submit** a Gravity saját AJAX-módja, a widget csak átadja. Amíg be nem kapcsolod, ki van kapcsolva.

## Korlátok

- A widget azt stílusozza, amit a Gravity Forms kirajzol. A Gravity Forms kiegészítők saját elemeit nem fedi le.
- A kijelölt jelölőnégyzet pipája Font Awesome-ikon, amit a The Plus Addons maga nem tölt be. Ellenőrizd a pipákat a közzétett oldalon, és ha üres négyzetet látsz, tegyél az oldalra bármelyik Elementor ikont.
- A **Border Style**, a **Border Width** és a **Border Color** minden szakaszban addig nem hat, amíg a **Box Border** ki van kapcsolva.
- A **Download Monitor** mód a Download Monitor bővítményt várja. Hétköznapi űrlaphoz hagyd a **Compatibility** mezőt **Gravity Form** értéken.

## Hibaelhárítás

- **A widget nincs a panelen.** Nézd meg, hogy a Gravity Forms aktív-e, majd hogy a **Gravity Form** kapcsoló be van-e kapcsolva a **The Plus Addons → Widgets** oldalon.
- **A Select Form lista üres.** Hozz létre űrlapot az **Űrlapok → Új űrlap** oldalon, és töltsd újra az Elementor szerkesztőjét. Ha a **Compatibility** értékét **Download Monitor**-ra állítottad, a lista a Download Monitor űrlapjait mutatja.
- **Az űrlap címe kétszer látszik.** Kapcsold ki a **Title** kapcsolót. Alapból be van kapcsolva, ezért egy saját címsorral duplán jelenik meg.
- **A szegély színe nem változik.** Kapcsold be a **Box Border** kapcsolót az adott szakaszban.