Mehrstufig-Formular

Was ist ein mehrstufiges Formular?

Ein mehrstufiges Formular ist eine einzige Einsendung, die in der UI auf mehrere Bildschirme verteilt ist. Statt alle Felder auf einmal zu zeigen, präsentiert es sie Schritt für Schritt mit Weiter- und Zurück-Steuerung und sendet erst eine Anfrage, wenn der Besucher das Ende erreicht. Die Live-Vorschau hier macht genau das: Sie geht die Felder einzeln durch, statt sie flach nebeneinander zu legen.

Die Einsendung ist trotzdem eine Payload. Das Formular in Schritte zu unterteilen ist eine Frage der Darstellung, keine Änderung daran, wie die Daten gesendet werden. Der Besucher geht durch die Bildschirme, die Felder werden dabei im Client-State gesammelt, und wenn er fertig ist, postet die gesamte Menge in einer einzigen Anfrage an Formpaste. In deinem Posteingang sehen ein mehrstufiges und ein flaches Formular identisch aus.

Wann du es verwenden solltest

Greif zu einem mehrstufigen Formular, wenn ein flaches Layout wie eine Wand wirken würde. Ein langes Formular, das auf einmal gezeigt wird, kann so abschreckend sein, dass Leute abspringen, bevor sie anfangen, selbst wenn jede einzelne Frage leicht ist. Es in ein paar kurze Bildschirme aufzuteilen senkt diesen gefühlten Aufwand und hält den Schwung.

Es passt gut zu Onboarding-Abläufen, längeren Bewerbungen und jedem Formular, bei dem du verwandte Fragen gruppieren willst, damit jeder Bildschirm ein klares Thema hat. Wenn dein Formular nur drei oder vier Felder hat, ist ein flaches Layout einfacher und genauso wirksam; das mehrstufige Muster verdient sich seinen Platz, sobald die Feldanzahl oder das Gefühl von “das ist viel” dich Abschlüsse kostet.

Was du aufnehmen solltest

Diese Vorlage hält die Feldmenge bewusst klein, damit der Fokus auf dem Muster bleibt und nicht auf dem Inhalt. Name und E-Mail sind erforderlich und ein Nachrichten-Textfeld ist optional, derselbe Kern, den ein einfaches Kontaktformular nutzt. Was es zu einem mehrstufigen Formular macht, ist die Darstellung: Diese Felder werden in der Vorschau einzeln durchgegangen, mit Weiter und Zurück dazwischen, statt alle zusammen gezeigt zu werden.

Der Punkt, den du daraus mitnehmen sollst, ist struktureller Natur. Welche Felder du auch hinzufügst, gruppiere sie in Schritte, die stimmig wirken, Kontaktdaten auf einem Bildschirm, das Wesentliche auf dem nächsten, und lass die Abfolge den Besucher vorantragen. Behalte ein verstecktes Access-Key-Feld in der finalen Payload, damit das einzelne Absenden weiterhin authentifiziert. Diese Vorlage fügt keine bedingte Logik oder Verzweigungen hinzu; die Schritte sind eine lineare Abfolge, und die ehrliche Beschreibung dessen, was sie tut, ist Gruppierung und Rhythmus, keine Entscheidungsbäume.

Tipps für ein mehrstufiges Formular, das ans Ende kommt

Poste einmal, am Ende. Sende nicht bei jedem Schritt eine Anfrage. Sammle die Felder im Client-State, während der Besucher weitergeht, und feuere eine einzige Einsendung ab, wenn er fertig ist. Eine Payload hält deinen Posteingang sauber und vermeidet halbfertige Datensätze von Leuten, die unterwegs abgesprungen sind.

Zeig den Fortschritt, damit das Ende erreichbar wirkt. Ein einfaches “Schritt 2 von 3” oder ein Fortschrittsbalken sagt den Leuten, wie viel noch übrig ist, und genau diese Beruhigung lässt ein längeres Formular kurz wirken. Die gefühlte Länge ist das, was du steuerst, also mach die Ziellinie sichtbar.

Entscheide, wie viel Zurück-Button-Unterstützung du brauchst. Du kannst jedem Schritt eine eigene URL geben, sodass der Zurück-Button des Browsers zwischen ihnen wandert, oder alles auf einer Seite mit lokalem State belassen. Beide posten dieselbe finale Payload, also entscheide danach, ob das direkte Verlinken auf einen Schritt für deinen Ablauf zählt.