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

> Egy meglévő Ninja Forms űrlap címkéinek, mezőinek és választógombjainak átszabása az Elementor paneljéből, a gyorsítótár-beállítással együtt.

A Ninja Forms gyorsan épít űrlapot, de a saját stílusbeállításai szűkösek, és a kész űrlap általában azt kapja, amit a sablonod a mezőkkel csinál. A **Ninja Form** widget a címkéket, az egysoros mezőket, az üzenetmezőket, a jelölőnégyzeteket és a rádiógombokat az Elementor panelből stílusozza, CSS nélkül. Egy gyorsítótár-beállítást is át kell állítani, hogy az űrlap az első látogatás után is megmaradjon, erről lejjebb írunk.

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 **Ninja 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 a **Ninja 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á a **Ninja 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 **Ninja Form** widgetet a vászonra.
3. A **Ninja Form** szakaszban a **Select Form** listából válaszd ki az űrlapot.

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

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

A képen a Tartalom lap látszik. Az Elementor vászna az űrlap kiválasztása után is üres marad: az űrlapot az előnézetben vagy a közzétett oldalon látod.

## Az űrlap eltűnése az első látogatás után

Az Elementor alapból gyorsítótárba teszi a widgetek kimenetét. Ha ezt a widgetet a gyorsítótárból szolgálja ki, a Ninja Forms saját szkriptjei nem töltődnek be, és az oldalon egyáltalán nincs űrlap. Csak a gyorsítótár ürítése utáni első látogatás mutatja. Kapcsold ki a gyorsítótárat erre a widgetre:

1. Jelöld ki a **Ninja Form** widgetet.
2. Nyisd meg a **Haladó** lap **Elrendezés** szakaszát (angolul **Advanced → Layout**).
3. Állítsd a **Cache Settings** mezőt **Inactive** értékre.
4. Kattints a **Frissítés** gombra.

Az egész webhelyre is kikapcsolhatod: **Elementor → Beállítások → Teljesítmény**, az **Element Cache** mező **Disable**. Ez minden widgetet érint, ezért a widgetenkénti beállítás általában jobb.

## A Stílus lap szakaszai

A panel szakaszainak a neve angolul jelenik meg.

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

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

A képen a szakaszok láthatók: **Form Heading**, **Field Hint**, **Label Styling**, **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 Styling** a mezők fölötti címke tipográfiáját, színét és margóját állítja, például a Név, az E-mail vagy az Üzenet fölött. A rádiógomb- vagy jelölőnégyzet-csoport címe a saját stílusát tartja.

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

Az **Input Fields Styling** az egysoros mezőket fedi le: szöveg, e-mail, szám, telefon é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.

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

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

A képen a mezők és az üzenetmező lekerekített szegélyt kaptak. A küldés gomb a Ninja Forms saját megjelenését tartja.

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

1. A WordPress admin felületén nyisd meg a Ninja Forms beállításait (**Ninja Forms → Settings**).
2. Az **Advanced Settings** alatt állítsd az **Opinionated Styles** mezőt **Light** vagy **Dark** értékre, és mentsd.
3. Térj vissza az Elementorba, és nyisd meg a **Stílus → CheckBox/Radio Field** szakaszt. A **Check Box** és a **Radio Button** fülön a lehetőségek szövegének színét, valamint a dobozok és körök kijelölt és kijelöletlen színét állítod.

A dobozokat és köröket a Ninja Forms saját stílusa rajzolja. Ha az **Opinionated Styles** értéke **None**, a böngésző sima jelölőnégyzetei látszanak, és csak a lehetőségek szövegének színe változik.

### Küldés gomb és a többi szakasz

A küldés gomb a Ninja Forms saját megjelenését kapja. A színeit a Ninja Forms **Opinionated Styles** beállításával változtathatod. A **Form Heading**, a **Field Hint**, az **Outer Field**, a **Form Container** és a **Response Message** szakasz is a panelen van, de a kipróbált képernyőn a küldés gombon és az űrlap körüli dobozon nem látszott változás, ezért ezekre ne építs.

## Az eredmény

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

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

A képen az alapállapot látszik: a mezők a Ninja Forms saját megjelenését viselik.

## Működés

- A mezők, a műveletek és az e-mail-beállítások a Ninja 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ó.
- Az Elementor vásznán nem jelenik meg az űrlap: a munkádat az előnézettel vagy a közzétett oldalon ellenőrizd.

## Korlátok

- Bekapcsolt Elementor-elemgyorsítótárral az űrlap az első látogatás után eltűnik. Állítsd a widget **Cache Settings** mezőjét **Inactive** értékre.
- Az űrlap nem rajzolódik ki az Elementor szerkesztőjében, a vászon üres marad, amíg elő nem nézed vagy közzé nem teszed az oldalt.
- A jelölőnégyzetek és rádiógombok stílusozásához a Ninja Forms **Opinionated Styles** beállítása **Light** vagy **Dark** legyen.
- A widgetben nincs fájlfeltöltő szakasz, ezért a Ninja Forms fájlfeltöltő mezője a böngésző saját vezérlőjét kapja.
- A **Border Style**, a **Border Width** és a **Border Color** addig nem hat, amíg a **Box Border** ki van kapcsolva.

## Hibaelhárítás

- **A widget nincs az Elementor panelen.** Nézd meg, hogy a Ninja Forms aktív-e, majd hogy a **Ninja Form** kapcsoló be van-e kapcsolva a **The Plus Addons → Widgets** oldalon.
- **A vászon üres az űrlap kiválasztása után.** Az űrlap nem jelenik meg az Elementor vásznán. Nézd meg az előnézetben vagy a közzétett oldalon.
- **Az űrlap egyszer látszik, utána üres az oldal.** Az Elementor a gyorsítótárból szolgálja ki a widgetet. Állítsd a **Cache Settings** mezőt **Inactive** értékre a widgeten, és frissítsd az oldalt.
- **A küldés gomb nem változik.** Állítsd át a gombot a Ninja Forms **Opinionated Styles** beállításával.
- **A jelölőnégyzetek színe nem változik.** Állítsd a **Ninja Forms → Settings → Advanced Settings → Opinionated Styles** mezőt **Light** vagy **Dark** értékre.
- **A szegély színe nem változik.** Kapcsold be a **Box Border** kapcsolót az adott szakaszban.