# Beágyazás Gutenbergben és widgetként

> Az űrlap elhelyezése a blokkszerkesztőben, a blokk stílusbeállításai, és űrlap az oldalsávban vagy a láblécben.

## Fluent Forms blokk a Gutenbergben

Az űrlapot a szerkesztő elhagyása nélkül is elhelyezheted oldalon vagy bejegyzésben.

1. Nyisd meg azt az oldalt vagy bejegyzést, ahová az űrlap kerül.
2. Kattints a **+** ikonra új blokk hozzáadásához, keress rá a „Fluent Forms” kifejezésre, és kattints a blokkra.
3. A blokkban válaszd ki a mentett űrlapot a legördülő listából. Ha még nincs űrlapod, előbb hozz létre egyet.
4. Az űrlap azonnal megjelenik a szerkesztő előnézetében.
5. Kattints a **Frissítés** vagy **Közzététel** gombra.

![A Fluent Forms blokk a szerkesztőben, jobbra a blokk beállításaival](./kepek/beagyazas-gutenberg-szerkeszto.webp)

*A Fluent Forms blokk a szerkesztőben, jobbra a blokk beállításaival* (https://minta-bolt.hu/wp-admin/post.php?post=7&action=edit)

A kijelölt blokk beállításai a jobb oldali **Blokk** lapon vannak.

![Az oldal az űrlappal a látogatók számára](./kepek/beagyazas-gutenberg-elol.webp)

*Az oldal az űrlappal a látogatók számára* (https://minta-bolt.hu/beagyazott-urlap/)

Az űrlapot a rövidkódjával is beteheted: illeszd a rövidkódot egy Rövidkód vagy egy Egyéni HTML blokkba.

## A blokk stílusa

A blokk beállításaiban három fül van: **Általános**, **Misc** és **Haladó**.

### Általános fül

Az egyes mezők és elemek kinézetét állítja.

| Beállítás | Mit csinál |
| --- | --- |
| **Form Style Template** | Kész sablon alkalmazása: Modern, Classic, Bootstrap style, Inherit style, illetve Custom a haladó testreszabáshoz. Alapértelmezett a **Form Styler** stílus. |
| **Label Styles** | A címkék színe és betűtípusa. |
| **Input & Textarea** | A szövegmezők szövegének és hátterének színe, betűtípus, térközök és szegélyek. Külön stílus adható a normál és a fókuszált (kattintás utáni) állapotra. |
| **Placeholder Styles** | A mezőkben látszó helyőrző szöveg színe. |
| **Radio & Checkbox Styles** | A rádiógombok és jelölőnégyzetek mérete és színe. |
| **Button Styles** | A beküldő gomb igazítása, szélessége, és a normál és az egérrel fölé állt (hover) állapot stílusa: szövegszín, háttérszín, betűtípus, belső és külső térköz, árnyék, szegély. |

### Misc fül

A **Container Styles** az egész űrlap tárolójára vonatkozik:

- **Background Type**: Classic (egyszínű vagy képes) vagy színátmenetes (Gradient) háttér.
- **Padding & Margin**: belső és külső térköz.
- **Box Shadow**: árnyék, amitől az űrlap kiemelkedik az oldalból.
- **Form Border Settings**: szegély az egész űrlap körül.

## Űrlap az oldalsávban vagy a láblécben

1. Hozd létre az űrlapot, amelyet használni szeretnél.
2. A WordPress-vezérlőpulton válaszd a **Megjelenés → Widgetek** menüpontot, majd azt a területet, ahová az űrlap kerül (oldalsáv vagy lábléc).
3. Kattints a **+** ikonra, és a keresőbe írd be: Fluent Forms. Kattints a **Fluent Forms** widgetre.
4. Adj címet a widgetnek, és a legördülő listából válaszd ki az űrlapot.
5. Kattints a **Mentés** vagy **Frissítés** gombra.
6. Nyisd meg az oldalt a látogatók nézetében: az űrlap az oldalsávban vagy a láblécben látszik.

Ehhez a használt sablonnak támogatnia kell a widgeteket. Ha a **Megjelenés** menüben nincs **Widgetek** menüpont, a sablon nem kínál widgetterületet.