Visforms 5
Mehrseitige Formulare

Mehrseitige Formulare

Das Mehrseitige Formular

Hinweis: Diese Features sind Teil der Visforms Subscription und in der freien Visforms Version nicht enthalten.

Für ein besseres Verständnis empfehlen wir die Dokumentation vollständig durchzulesen und mit dem Abschnitt Einleitung zu beginnen.
Zusammenhänge, die in früheren Abschnitten der Dokumentation erklärt wurden, werden hier nicht wiederholt.

Mehrseitige Formulare nutzen Felder vom Typ “Neue Seite”

Sie können jedem Formular beliebig viele Seiten hinzufügen. Dies geschieht einfach durch das Einfügen eines Feldes vom Typ Neue Seite im Formular. Positionieren Sie das Feld in der Reihenfolge der Felder an der Stelle, an der der Seitenumbruch eingefügt werden soll. Die Option Bezeichnung des Feldes vom Typ Neue Seite wird verwendet als Text des Buttons, der auf die nächste Seite führt. Ganz so, wie Sie es vom Submit-Button und Reset-Button her kennen.

Feld-Typ 'Neue Seite'

Optionen für mehrseitige Formulare

Sie können für die Anzeige bei mehreren Seiten wählen zwischen den beiden folgenden Darstellungen:

  • Mehrere Seiten (Default-Wert),
  • Accordion.

Um ein mehrseitiges Formular zu sehen, muss der Parameter Anzeige als auf Mehrere Seiten gesetzt sein, welches auch der Default-Wert ist:

  • Formular-Konfiguration » Reiter: Erweitert » Unter-Reiter: Layout

    Gruppe: Mehrseitige Formulare » Parameter Anzeige als = ‘Mehrere Seiten’

Sie können einen eigenen Text für die Zurück-Buttons festlegen. Lassen Sie diese Option leer, wird der Standardtext Zurück verwendet.

Nutzen Sie die Option CSS Klasse für Zurück-Button, falls ein individuelles Styling der Zurück-Buttons benötigt wird.

Sie können festlegen, ob dem Benutzer sein Fortschritt angezeigt wird.
Wenn Sie Ihr Formular etwa in einem Modul auf engem Raum anzeigen, dann können Sie platzsparend den Text in der Fortschrittsanzeige minimieren (siehe unten).

Formular Optionen für mehrseitige Formulare

Das fügt Visforms automatisch hinzu

Visforms zeigt automatisch ab der zweiten Seite, einen Zurück-Button an. Wenn Sie den Parameter Zusammenfassungsseite auf Ja gesetzt haben, fügt Visforms dem Formular eine Zusammenfassungsseite hinzu. Visforms zeigt dann automatisch auf der letzten Formular-Seite mit Feldern einen Prüfen-Button ein, der auf die Zusammenfassungsseite führt. Visforms kennt zahlreiche Möglichkeiten die Zusammenfassungsseite und insbesondere die involvierten Buttons in den folgenden Bereichen zu konfigurieren:

  • Formular-Konfiguration » Reiter: Erweitert » Unter-Reiter: Layout

    Gruppe: Mehrseitige Formulare
    Gruppe: Fortschrittsanzeige

Die Buttons des mehrseitigen Formulars

Die folgenden Buttons sind Bestandteil des mehrseitigen Formulars:

  • Weiter Button:
    Er bewirkt eine Vorwärts-Navigation zur nächsten Seite.
    Er entsteht durch Einfügen des Feld-Typs Neue Seite ins Formular.
    Der Button-Text entspricht dem Label des Formular-Feldes:
    • Feld-Konfiguration

      Parameter: Label = ‘Mein Weiter’.

  • Zurück Button:
    Er bewirkt eine Zurück-Navigation zur vorherigen Seite.
    Er entsteht durch Einfügen des Feld-Typs Neue Seite ins Formular.
    Der Button-Text entspricht folgender Einstellung im Formular:
    • Formular-Konfiguration » Reiter: Erweitert » Unter-Reiter: Layout

      Gruppe: Mehrseitige Formulare » Parameter: Zurück Button Text = ‘Mein Zurück’.

  • Prüfen Button:
    Er bewirkt eine Vorwärts-Navigation zur Zusammenfassungsseite mit einer tabellarischen Übersicht aller Eingaben zur leichteren Prüfung derselben.
    Er wird automatisch eingefügt, wenn die Option Zusammenfassungsseite aktiviert ist.
    Der Button-Text entspricht folgender Einstellung im Formular:
    • Formular-Konfiguration » Reiter: Erweitert » Unter-Reiter: Layout

      Gruppe: Zusammenfassungsseite » Parameter: Prüfen Button Text = ‘Mein Prüfen’.

  • Ändern Button:
    Er bewirkt eine Zurück-Navigation von der Zusammenfassungsseite zur letzten Eingabe-Seite mit Formular-Feldern.
    Er wird automatisch eingefügt, wenn die Option Zusammenfassungsseite aktiviert ist.
    Der Button-Text entspricht folgender Einstellung im Formular:
    • Formular-Konfiguration » Reiter: Erweitert » Unter-Reiter: Layout

      Gruppe: Zusammenfassungsseite » Parameter: Ändern Button Text = ‘Mein Ändern’.

  • Submit, Image-Submit und Reset Button
    Die Buttons bewirken jeweils ein Absenden oder Zurücksetzen der Formular-Daten.
    Sie entstehen durch Einfügen eines der Feld-Typen Submit Button, Image Submit Button oder Reset Button ins Formular.
    • Bei den Submit und Reset Buttons entspricht der Button-Text dem Label des Formular-Feldes:
      • Feld-Konfiguration

        Parameter: Label = ‘Mein Submit’.
        Parameter: Label = ‘Mein Reset’.

    • Der Image Submit Button ist ein Formular-Feld gleichen Typs und zeigt keinen Button-Text an, sondern das in der Feld-Konfiguration dafür hinterlegte Bild:
      • Feld-Konfiguration » Reiter: Grundeinstellungen

        Gruppe: Einstellungen für Image Submit Button » Parameter: Bild wählen = ‘Mein Datei-Pfad des Bildes’.

Fokussierung des Formulars nach dem Umschalten auf eine neue Seite

Sie können festlegen, ob und wie das Formular nach dem Umschalten auf eine neue Seite fokussiert wird.
Das gilt für ein Umschalten vorwärts wie rückwärts.

Seite nicht fokussieren

Nach dem Wechsel auf eine neue Seite wird nicht gescrollt. Sind die einzelnen Seiten des Formulars sehr unterschiedlich lang, dann kann es vorkommen, dass der Benutzer nur eine weiße Stelle der Seite sieht. Sind die einzelnen Seiten des Formulars etwa gleich lang, dann ist immer der untere Rand des Formulars gut im Viewport.

Seite oben fokussieren

Nach dem Wechsel auf eine neue Seite scrollt die Seite so weit nach oben, dass das erste Formularfeld auf der Seite gut sichtbar ist. Das erste Formularfeld auf der Seite befindet sich dann oben im Viewport.

Seite unten fokussieren

Nach dem Wechsel auf eine neue Seite scrollt die Seite so weit nach unten, dass das unterste Formularfeld auf der Seite gut sichtbar ist. Das unterste Formularfeld auf der Seite befindet sich dann etwa in der Mitte des Viewports.

Fokussierung des Formulars nach dem Umschalten auf eine neue Seite

Ein Beispiel-Formular

Ein Beispiel für ein mehrseitiges Formular finden Sie hier: Mehrseitiges Formular.

Was steht auf dieser Seite