# Többlépéses űrlap

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

A többlépéses űrlap kisebb szakaszokra bontja a hosszú űrlapot, így a kitöltőnek nem kell egyszerre áttekintenie az összes mezőt. A funkció a Fluent Forms Pro kiegészítőhöz tartozik.

## A Form Step mező hozzáadása

1. Nyiss meg egy űrlapot (üres űrlapot vagy sablont) a szerkesztőben.
2. A **Beviteli mezők** panelen nyisd le a haladó mezők csoportját, és válaszd a **Form Step** mezőt, vagy húzd be az űrlapra.

A mező három elemet ad az űrlaphoz: **PAGING START**, **PAGE BREAK** és **PAGING END**. A szerkesztéshez vidd az egeret az elem fölé, és kattints a ceruzára.

## Paging Start

Ez az elem a teljes lépéssorozat közös beállításait adja: a folyamatjelzőt és az átmeneteket.

### Folyamatjelző

A folyamatjelző az űrlap tetején mutatja, hol tart a kitöltő. Négy típus közül választhatsz:

| Típus | Működés |
| --- | --- |
| **Progress Bar** | Folyamatsáv százalékos jelzéssel, például „1 / 2 lépés kész”. |
| **Steps** | Számozott lépéscímek, az aktuális kiemelve. A már teljesített lépésekre kattintva visszaléphet a kitöltő. A még el nem ért lépések zárolva vannak, az ellenőrzés sorrendje megmarad. |
| **Tabs** | A lépéscímek kattintható fülek. Egy kattintással visszaléphet bármelyik teljesített lépésre. |
| **None** | Nem jelenik meg folyamatjelző. |

A **Steps** és **Tabs** jelzőnél a **Step Titles** mezőkbe írt szövegek lesznek a feliratok. Ha üresen hagyod, a felirat „Step 1”, „Step 2” stb.

### Tabs jelző beállításai

- **Element Class**: egyéni CSS-osztályok a mezőhöz.
- **Tab Position**: **Top** (alapértelmezett) esetén a fülek vízszintesen az űrlap fölött vannak, és ha nem férnek el, vízszintesen görgethetők. **Left** esetén függőlegesen, az űrlap bal oldalán jelennek meg, ami sok lépésnél vagy hosszú címeknél praktikus.
- **Show Progress Bar Under Tabs**: kompakt folyamatsáv a vízszintes fülek alatt. Alapból ki van kapcsolva.

### Animáció és oldalvezérlés

- **Animation Type**: az átmenet típusa lépésváltáskor: Slide Left/Right, Fade In/Out, Slide Down/Up vagy None.
- **Step Titles**: egyéni feliratok az 1., 2. stb. lépéshez.
- **Disable auto focus when changing each page**: ha bejelölöd, lépésváltáskor az oldal nem ugrik az űrlap tetejére.
- **Enable auto page change for single radio field**: az űrlap automatikusan a következő lépésre lép, amint a kitöltő kiválaszt egy opciót az aktuális lépés utolsó rádiógombmezőjében.
- **Enable Per-step data save (Save and Continue)**: az űrlap lépésenként helyben menti a megadott adatokat, így a kitöltő később folytathatja, ha félbehagyta.
- **Resume Step from last form session**: a legutóbbi munkamenet lépésénél folytatódik az űrlap. Ha az oldalon rögzített fejléc van, az automatikus görgetés miatt az űrlap eleje a fejléc alá kerülhet, ezért érdemes a görgetési eltolást beállítani.

## Page Break

Minden **Page Break** új lépést hoz létre: ami utána jön, a következő lépésbe kerül. Beállításai:

1. **Previous Button**: az előző oldalra lépő gomb szövege, vagy szöveg helyett kép (képlinkkel).
2. **Next Button**: a következő oldalra lépő gomb, ugyanígy szöveggel vagy képpel.
3. **Element Class**: egyéni CSS-osztály.

## Paging End

A **Paging End** zárja a többlépéses részt. Beállításai:

1. **Element Class**: egyéni CSS-osztály.
2. **Previous Button**: az **Default** beállításnál a gomb szövegét írhatod át, a **Image** beállításnál képlinket adhatsz meg.

## Beágyazás

Mentsd az űrlapot, nézd meg az **Előnézet és tervezés** gombbal, majd másold ki a shortcode-ot a jobb felső sávból, és illeszd be az oldalra vagy bejegyzésbe.