Folyamatjelző többoldalas űrlapokon

A többoldalas űrlapok kisebb, könnyebben kezelhető szakaszokra bontják a hosszú űrlapot. A Gravity Forms beépített eszközökkel mutatja meg a látogatónak, hol tart: ha az űrlapra felveszed az Oldal mezőt, folyamatjelző sáv és lépésjelző is használható. Ezek segítenek a látogatónak eligazodni, így az űrlap jobban használható.

Ez a fejezet azt mutatja be, hogyan kapcsolhatod be a Folyamatjelző sávot vagy a Lépések jelzőt, hogyan szabályozhatod a lapozást, és hogyan szabhatod testre a megjelenést.

Követelmény

Olyan űrlap, amely tartalmaz Oldal mezőt (vagyis többoldalas űrlap). A mező beállításait a Oldal mező fejezet részletezi.

A lapozás és a jelző bekapcsolása

1. Nyisd meg az Űrlapok menüt, és szerkeszd az űrlapot.
2. Vegyél fel egy vagy több Oldal mezőt a Szabványos mezők közül. Az első Oldal mező létrehozza a Lapozás indítása jelölőt.
3. Kattints a Lapozás indítása elemre.
4. Az Általános szakaszban az Előrehaladás jelzője beállításnál válaszd ki a kívánt típust.

Az Előrehaladás jelzője mutatja a látogatónak az űrlapon belüli helyét. Az egyes beállítások részleteit az Oldal mező fejezet táblázata tartalmazza.

A jelző típusai

Folyamatjelző sáv

Vízszintes sáv, amely az oldalakon való haladással egyre jobban kitelik.

https://minta-bolt.hu/lapozas-proba/

A képen a sáv és a felette lévő felirat mutatja, hányadik oldalnál tart a látogató.

Lépések

Az űrlap minden oldalához felirattal ellátott lépést jelenít meg. Akkor jó választás, ha az oldalak világosan megnevezett szakaszok.

https://minta-bolt.hu/lapozas-proba/

A képen a két lépés látszik, az aktuális oldal kiemelve.

Nincs

Ha a Nincs lehetőséget választod, az űrlapon nem jelenik meg haladásjelző.

Lapozógombok

A lapozógombok azt szabályozzák, hogyan mozog a látogató a többoldalas űrlap oldalai között. A feltételes logikával finomíthatod az élményt.

Következő gomb

A Következő gomb viszi tovább a látogatót a következő oldalra. Minden többoldalas űrlap erre épül. A feliratot az űrlap hangneméhez igazíthatod (például „Tovább”, „Következő lépés”, „Folytatás”), vagy a webhely megjelenéséhez illő saját képet is használhatsz.

Előző gomb

Az Előző gomb visszaviszi a látogatót egy korábbi oldalra. Akkor hasznos, ha a beküldés előtt át kell nézni vagy módosítani kell a válaszokat, például jelentkezési lapon, megrendelőűrlapon vagy többlépéses regisztrációnál.

Feltételes logika

A Gravity Forms kétféleképpen szabályozza a lapozást. Mindkettő a navigációra hat, de a céljuk más.

Oldal feltételes logikája

• Mit csinál: a korábbi válaszok alapján eldönti, hogy egy teljes oldal megjelenjen-e, vagy kimaradjon.
• Mikor használd: ha egy oldal tartalma a látogatók csak egy részét érinti.
• Példa: egy autóbiztosítási kérelem megkérdezi, hogy szeretne-e a látogató fedezetet további sofőrökre is. Ha igen, megjelenik az oldal, amely minden további sofőr adatait gyűjti. Ha nem, az oldal automatikusan kimarad.

A Következő gomb feltételes logikája

• Mit csinál: azt szabályozza, hogy a Következő gomb látszik vagy aktív-e. Ha a feltétel nem teljesül, a látogató nem léphet tovább.
• Mikor használd: ha a látogatónak valamit teljesítenie kell a továbblépéshez, miközben egyetlen oldalt sem rejtesz el.
• Példa: egy önkéntes jelentkezési űrlapon kötelező elfogadni a következőt: „Megértettem és elfogadom az önkéntesi biztonsági szabályokat.” Ha a látogató az elfogadást választja, a Következő gomb megjelenik, illetve aktív lesz. Ha az elutasítást, nem léphet tovább.

A feltételek szabályai ugyanúgy épülnek fel, mint a mezők feltételes logikájánál. A kettő összehasonlítását a Feltételes logika többoldalas űrlapokon fejezet is tartalmazza.

Befejező szöveg megjelenítése

A folyamatjelző sávnál megadhatsz befejező szöveget, amely az utolsó oldalon vagy a megerősítő üzenetnél jelenik meg. Ez a szöveg 100 százaléknál lecseréli a szokásos folyamatjelzőt. Ehhez a Lapozás indítása elemnél a A kész folyamatjelző megjelenítése a megerősítésnél beállítást jelöld be.

Fejlesztőknek

A jelző megjelenése kódból is módosítható a gform_progress_bar, a gform_progress_steps és a gform_progressbar_start_at_zero szűrővel. A CSS-célzásról a CSS-célzási példák fejezet szól.