Tovább a tartalomhoz

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.

  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.
https://minta-bolt.hu/wp-admin/admin.php?page=fluent_forms&form_id=1&route=editor
A szerkesztő az Űrlaplépés mező beillesztése után

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.

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.

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

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.
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.

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.

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.
  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 fejezet ír.

Készült:

Tiszteletben tartjuk a magánszférádat

Sütiket használunk a böngészési élmény javítására és a forgalom elemzésére. Az analitika csak akkor indul, ha engeded. Adatvédelmi irányelvek, Sütitájékoztató.

Sütibeállítások