# Konverzációs űrlap

> Beszélgetés formájú űrlap létrehozása, a Dizájn, Meta és Share fülek beállításai, megosztás és beágyazás.

A konverzációs űrlap egyszerre egy kérdést mutat a teljes képernyőn, és a válasz után lép a következőre, mintha beszélgetnél a kitöltővel. Az űrlap kinézetét és a gombok szövegeit külön felületen állíthatod.

## Konverzációs űrlap létrehozása

1. Nyisd meg a **Fluent Forms → Űrlapok** oldalt, és kattints az új űrlap gombjára, vagy válaszd a bal oldali menü **Új űrlap** pontját.
2. A felugró ablakban válaszd a **Konverzációs űrlap létrehozása** kártyát.
3. Megnyílik a szerkesztő négy előre felvett mezővel. Ezeket átszerkesztheted, és újakat is hozzáadhatsz.

![A konverzációs űrlap szerkesztője az előre felvett mezőkkel](./kepek/urlap-keszitese-2-konv-szerkeszto.webp)

*A konverzációs űrlap szerkesztője az előre felvett mezőkkel* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=3&route=editor)

A képen a szerkesztő látszik: középen a mezők, jobbra a **Beviteli mezők** panel. Fent a **Szerkesztő**, **Dizájn**, **Beállítások és integrációk** és **Bejegyzések** fülek között válthatsz.

A konverzációs űrlapban a tárolómezők (container) nem használhatók, mert a kérdések egymás után, külön jelennek meg.

### A mezők kezelése

Ha az egeret egy mező fölé viszed, megjelennek a műveletek:

- **Húzás**: a mezőt fel vagy le mozgatod, így változik a kérdések sorrendje.
- **Szerkesztés** (ceruza): a jobb oldali panel a mező beállításait mutatja.
- **Duplikálás**: a mezőről másolat készül.
- **Törlés** (kuka): a mező törlődik.
- **Új mező** (plusz): új beviteli mezőt illeszt be. Mezőt a jobb oldali **Beviteli mezők** panelről is hozzáadhatsz.

### Mentés és beágyazás

Kattints a jobb felső **Save Form** gombra a mentéshez. Az **Előnézet** gombbal megnézheted az űrlapot, a felső sávból pedig kimásolhatod a shortcode-ot, hogy oldalra vagy bejegyzésbe illeszd.

## Az űrlap megjelenése: Dizájn

Nyisd meg az űrlapot a szerkesztőben, és kattints a **Dizájn** fülre. Három lapfül áll rendelkezésre: **Design**, **Meta** és **Share**. A jobb oldalon élő előnézet mutatja a változásokat, a **Mobile / Desktop** kapcsolóval a két nézet között váltasz.

![A Dizájn oldal Design füle az élő előnézettel](./kepek/urlap-keszitese-2-konv-dizajn.webp)

*A Dizájn oldal Design füle az élő előnézettel* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=3&route=conversational_design)

A képen a **Design** fül látszik. Ez a testreszabás a Fluent Forms Pro kiegészítőhöz tartozik, e nélkül csak előnézet érhető el.

### Design fül

| Beállítás | Mit csinál |
| --- | --- |
| **Betűtípus** | Az űrlap betűcsaládja. Alapból a rendszer alapértelmezett beállítása. |
| **Kérdések** | A kérdések szövegének színe. |
| **Válaszok** | A válaszok színe. |
| **Gomb** | A gomb színe. |
| **Gomb szövege** | A gombon lévő szöveg színe. |
| **Háttér** | Az űrlap háttérszíne. |
| **Background Image** | Háttérkép feltöltése. A kép fényerejét is állíthatod. |
| **Elrendezés kikapcsolása mobileszközökön** | Mobilon elrejti az egyéni elrendezést. |
| **A következőre görgetés kikapcsolása** | Megakadályozza, hogy a kitöltő görgetéssel lépjen a következő mezőre. |
| **Márkajelzés kikapcsolása** | Elrejti a Fluent Forms márkafeliratot. |
| **Kulcsra utaló tipp** | Rádiógomb és jelölőnégyzet mezőknél a válaszokat billentyűvel (A, B, C …) is ki lehet választani. |

A változtatásokat a **Save Settings** gombbal mentsd.

### Meta fül

A **Meta** fülön a közösségi megosztáshoz tartozó szövegeket és az űrlap üzeneteit állítod.

![A Meta fül a megosztási szövegekkel és az űrlapüzenetekkel](./kepek/urlap-keszitese-2-konv-meta.webp)

*A Meta fül a megosztási szövegekkel és az űrlapüzenetekkel* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=3&route=conversational_design)

A képen a fül két része látszik: fent a megosztási adatok, lent a **Form Messages** szakasz a gombok és tippek szövegeivel.

| Beállítás | Mit csinál |
| --- | --- |
| **Meta cím** | A böngészőfül címe és a megosztási előnézet címe. |
| **Meta leírás** | Rövid összefoglaló az űrlap oldaláról. |
| **Featured Image** | A közösségi megosztás előnézeti képe. |
| **Biztonsági kód (opcionális)** | „Só” a megosztási URL-hez, hogy az űrlap azonosítójából ne lehessen kitalálni a címet. |
| **Folytatás gomb szövege** | A továbblépő gomb felirata. |
| **Kihagyás gomb szövege** | A kihagyás gomb felirata. |
| **Megerősítő gomb szövege** | A megerősítő gomb felirata. |
| **Útmutató a következő kérdésre billentyűzettel történő továbblépéshez** | Szöveg, amely elmondja, hogyan lépj tovább billentyűvel. |
| **Tipp sortörés készítéséhez a szövegmezőben** | Segítség a sortöréshez a szövegmezőben. |
| **Tipp több elem kijelöléséhez** | Jelzi, hogy több válasz is választható. |
| **Tipp egyetlen opció kijelöléséhez** | Jelzi, hogy csak egy válasz választható. |
| **Billentyűzetes tipp szövege** | A billentyűtipp szövege. |
| **Billentyűzetes tipp buboréksúgója** | A billentyűtipp súgóbuborékja. |
| **Előrehaladás szövege** | Az előrehaladás felirata. Változók: `{percent}`, `{step}`, `{total}`. |
| **Hibás adat esetén megjelenő üzenet** | Akkor jelenik meg, ha a mező hibásan van kitöltve. |
| **Alapértelmezett helyőrző** | A mezők alapértelmezett helyőrző szövege. |
| **Fájlfeltöltési méretkorlát szövege** | A javasolt feltöltési méretkorlát szövege. |

### Share fül

A **Share** fülön az űrlap megosztásához és beágyazásához kapsz kész kódokat.

![A Share fül a megosztási linkkel és a shortcode-okkal](./kepek/urlap-keszitese-2-konv-megosztas.webp)

*A Share fül a megosztási linkkel és a shortcode-okkal* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=3&route=conversational_design)

A képen a megosztási lehetőségek láthatók, mindegyik mellett másoló gombbal.

- **Share Via Direct URL**: közvetlen link az űrlaphoz, amelyet közösségi oldalakon is megoszthatsz. Közvetlen URL a Pro kiegészítővel érhető el.
- **Email Share**: kész levélszöveg, amelyet az űrlap linkjével együtt kimásolhatsz.
- **Shortcode a beszélgetős űrlaphoz**: oldalba vagy bejegyzésbe illesztve konverzációs módban jeleníti meg az űrlapot, például `[fluentform type="conversational" id="3"]`.
- **Shortcode a klasszikus űrlaphoz**: ugyanaz az űrlap hagyományos megjelenéssel, például `[fluentform id="3"]`.
- **Embed via HTML Code**: iframe-kód, ha az űrlapot másik oldalon vagy WordPressen kívül akarod használni. A `height` értéket átírhatod. Ellenőrizd, hogy a tárhelyed engedi-e az iframe-et.

Az egész beállítás végén kattints a **Save Form** gombra, majd az **Előnézet** gombbal nézd meg az eredményt.