# Többlépéses űrlap

> Hosszú űrlap felosztása lépésekre: az Űrlaplépés mező három része, a folyamatjelző, az animáció és a gombok beállításai.

A többlépéses űrlap kisebb részekre osztja a hosszú űrlapot, így a kitöltő nem érzi nyomasztónak. Az **Űrlaplépés** mező a Pro kiegészítővel érhető el.

## A lépések felvétele

1. Hozz létre egy űrlapot (üresen vagy sablonból).
2. A szerkesztő jobb oldali **Beviteli mezők** paneljén nyisd ki a **Speciális mezők** csoportot.
3. Kattints az **Űrlaplépés** mezőre, vagy húzd az űrlapba.

![A szerkesztő az Űrlaplépés mező beillesztése után](./kepek/urlapok-letrehozasa-2-tobblepeses-szerkeszto.webp)

*A szerkesztő az Űrlaplépés mező beillesztése után* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=1&route=editor)

A mező három részből áll: **Oldalazás kezdete**, **Oldaltörés** és az oldalazás vége. Az űrlap mezői a kezdet és a vége közé kerülnek, minden **Oldaltörés** új lépést nyit.

## Oldalazás kezdete

A kezdő sáv a teljes lépéssorozat közös viselkedését és megjelenését állítja. Vidd fölé az egeret, és kattints a ceruza ikonra: a **Beviteli mezők testreszabása** fülön a **Start Paging** beállításai jelennek meg.

![Az Oldalazás kezdete mező beállításai](./kepek/urlapok-letrehozasa-2-tobblepeses-kezdet.webp)

*Az Oldalazás kezdete mező beállításai* (https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=1&route=editor)

### Folyamatjelző

A **Folyamatjelző** a lépések állását mutatja az űrlap tetején. Négy kinézet közül választhatsz:

- **Folyamatjelző sáv**: egy sáv a haladás százalékos jelzésével (például „1 / 2 lépés kész”). Ez az alapérték.
- **Lépések**: a lépések számozott listája, az aktuális lépés kiemelve. A már teljesített lépésekre kattintva a kitöltő visszaugorhat. A még el nem ért lépések zárolva maradnak, így a szokásos ellenőrzési sorrend érvényes.
- **Fülek**: a lépéscímek kattintható fülekként jelennek meg. Bármelyik már teljesített lépésre egy kattintással visszaléphetsz.
- **Nincs**: semmilyen folyamatjelző nem látszik.

A **Lépések** és a **Fülek** jelzőnél a **Lépéscímek** mezőkbe írt szövegek lesznek a feliratok. Ha üresen hagyod, a **Lépés 1**, **Lépés 2** stb. feliratok jelennek meg.

A **Fülek** jelzőnél további beállítások jelennek meg:

- **Elem osztálya**: egyedi CSS-osztályok a mezőhöz.
- **Tab Position** (a fülek elhelyezése): **Top** (alapérték), ahol a fülek vízszintesen az űrlap fölött állnak, és ha nem férnek el, vízszintesen görgethetők, illetve **Left**, ahol a fülek függőlegesen, az űrlap bal oldalán, külön oszlopban állnak. A bal oldali elhelyezés sok lépésnél vagy hosszú lépéscímeknél előnyös.
- **Show Progress Bar Under Tabs**: egy kis folyamatjelző sáv a vízszintes fülsor alatt. Alapból ki van kapcsolva.

### Animáció és oldalváltás

| Beállítás | Mit csinál |
| --- | --- |
| **Animáció típusa** | A lépések közötti váltás animációja: **Csúsztatás balra/jobbra** (alapérték), **Előtűnés/Eltűnés**, **Csúsztatás le/fel** vagy **Nincs**. |
| **Lépéscímek** | Egyedi feliratok a **Lépés 1**, **Lépés 2** stb. helyett. |
| **Automatikus fókusz kikapcsolása oldalváltáskor** | Ha bejelölöd, az oldal nem görgeti magától az űrlap tetejére a kitöltőt, amikor lépést vált. |
| **Automatikus oldalváltás bekapcsolása egyetlen választógombnál** | Ha az aktuális lépés utolsó mezője választógomb, a kiválasztás után az űrlap magától a következő lépésre lép. |
| **Lépésenkénti adatmentés bekapcsolása** | A lépések adatait lépésenként menti (**Save and Continue**), így ha a kitöltő félbehagyja, később folytathatja. Bekapcsolása után külön jelölőnégyzet jelenik meg az utolsó munkamenet lépésének visszaállításához. |

Ha az oldaladon fix (ragadós) fejléc van, a bekapcsolt automatikus görgetés miatt az űrlap eleje a fejléc mögé kerülhet. Ilyenkor érdemes a görgetés eltolását beállítani, vagy az automatikus fókuszt kikapcsolni.

## Oldaltörés

Az **Oldaltörés** új lépést nyit az űrlapban: minden felvett oldaltörés után új szakasz következik. Kattints a ceruza ikonra a beállításaihoz.

1. **Previous Button** (előző gomb): választhatsz szöveges gombot vagy képes ikont. A szöveg átírható, képnél a kép hivatkozását kell megadni.
2. **Next Button** (következő gomb): ugyanígy szöveges vagy képes.
3. **Elem osztálya**: egyedi CSS-osztályok a stílushoz.

## Oldalazás vége

Az oldalazás vége zárja le a többoldalas űrlapot. A ceruza ikonnal szerkeszthető:

1. **Elem osztálya**: egyedi CSS-osztályok.
2. **Previous Button** (előző gomb): az **Alapértelmezett** választással a gomb szövege szerkeszthető, a **Kép** választással a gomb helyére képet tehetsz, a kép hivatkozásának megadásával.

## Kitétel az oldalra

1. Mentsd az űrlapot a **Save Form** gombbal.
2. Az **Előnézet és tervezés** gombbal nézd meg az űrlapot.
3. Másold ki a rövidkódot a szerkesztő jobb felső sarkából, és illeszd be a kívánt oldalra vagy bejegyzésbe.

Ugyanígy annyi többlépéses űrlapot készíthetsz, amennyit szeretnél. A félbehagyott kitöltések kezeléséről az [Űrlapfunkciók](https://hub.hellowp.io/hu/plugins/fluentformpro/urlapfunkciok/) fejezet ír.