Mehrstufige Formulare, Spalten und Tabs

So teilst du ein WEMASY-Formular in Schritte und ordnest Felder mit dem Formular-Editor in Spalten, Tabs und Gruppen an

Entwurf

Lange Formulare lassen sich leichter ausfüllen, wenn du sie aufteilst. Mit den Layout-Feldern im WEMASY-Formular-Editor stellst du Felder in Spalten nebeneinander, gruppierst sie, verteilst sie auf Tabs oder machst aus dem Formular Schritte mit einer Fortschrittsleiste. Layout-Felder enthalten andere Felder und lassen sich ineinander verschachteln.

Die Layout-Felder

  • Feldgruppe: ein Container für Felder, die zusammengehören, etwa eine Adresse.
  • Spaltenlayout: Felder nebeneinander, zum Beispiel Vorname und Nachname.
  • Tab-Container: Felder, die auf Tabs verteilt sind, zwischen denen der Besucher klickt.
  • Schritt-Container: ein mehrstufiges Formular mit Fortschrittsanzeige und Buttons für Weiter und Zurück.

Die Kategorie Layout in der Feld-Seitenleiste mit Spaltenlayout, Tab-Container und Schritt-Container

Felder in Spalten setzen

  1. Öffne das Formular im Formular-Editor.
  2. Ziehe Spaltenlayout aus der Kategorie Layout auf die Arbeitsfläche.
  3. Klicke auf das Spaltenlayout und wähle die Anzahl der Spalten oder nutze Spalte hinzufügen und Spalte entfernen.
  4. Ziehe in jede Spalte ein Feld.

Setze den Haken bei Flex-Umbruch aktivieren, damit die Spalten auf kleinen Bildschirmen untereinander rutschen.

Zwei Formularfelder nebeneinander in einem Spaltenlayout

Ein mehrstufiges Formular bauen

  1. Ziehe Schritt-Container auf die Arbeitsfläche.
  2. Klicke auf den Schritt-Container, um seine Eigenschaften zu öffnen.
  3. Klicke für jeden benötigten Schritt auf Schritt hinzufügen und gib jedem einen Schritttitel.
  4. Ziehe die Felder jedes Schritts in diesen Schritt.
  5. Wähle die Position der Fortschrittsleiste: Oben oder Ausgeblendet.
  6. Lege die Navigation fest mit Obere Navigation aktivieren und Untere Navigation aktivieren sowie den Texten für Zurück-Button und Weiter-Button.
  7. Setze den Senden-Button in den letzten Schritt.

Die Eigenschaften eines Schritt-Containers im Formular-Editor

Tabs nutzen

  1. Ziehe Tab-Container auf die Arbeitsfläche.
  2. Klicke für jeden Tab auf Tab hinzufügen und gib einen Tab-Titel ein.
  3. Ziehe Felder in jeden Tab.

Ein Button-Feld kann den Besucher zu einem Schritt oder Tab bringen. Wähle im Tab Erweitert des Buttons die Aktion Zu Schritt gehen oder Zu Tab gehen.

Validierung in Schritten

Pflichtfelder und Validierungsregeln funktionieren in jedem Container. Lies Pflichtfelder und Validierungsregeln, um sie einzurichten. Nutze die Vorschau im Editor, um vor dem Veröffentlichen alle Schritte durchzugehen.

Tipp: Setze die leichten Fragen in den ersten Schritt. Besucher, die ein Formular begonnen haben, schließen es eher ab.

Setz es direkt um,
auf deiner eigenen Website.

Starte kostenlos mit WEMASY und baue deine Seite in wenigen Minuten.