Ein Webflow-Formular in mehrere Schritte teilen — mit Verzweigung, eigenen Fehlertexten und Auswahl-Kacheln.
Form Steps macht aus einem gewöhnlichen Webflow-Formular ein Formular mit mehreren Schritten. Das Formular bleibt ein Webflow-Formular: Submit, Erfolgs- und Fehlermeldung, Zapier, Make und alle Integrationen laufen unverändert weiter. Neu ist nur, was zwischen dem ersten Feld und dem Absenden passiert.
Einmal pro Projekt genügt, auch wenn du die Lösung auf mehreren Seiten nutzt: Project Settings → Custom Code → Head Code. Das Skript lädt nebenher und hält das Rendern nicht auf; es läuft erst, wenn die Seite steht, und tut nichts, solange kein fpu-Attribut da ist.
<!-- FlowPowerUser · Form Steps -->
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/form-steps.js"></script>Jeder Schritt ist ein gewöhnlicher Div-Block im Formular. Du baust alle Schritte untereinander im Designer — sichtbar wird immer nur einer. Zwei Wege sind üblich:
Form Block fpu-form-element="form"
└─ Form
├─ Div Schritt 1 fpu-form-element="step"
├─ Div Schritt 2 fpu-form-element="step"
├─ Div Schritt 3 fpu-form-element="step"
└─ Div Knopfleiste
├─ Button fpu-form-element="prev"
├─ Button fpu-form-element="next"
└─ SubmitDrei bis fünf Schritte in fester Reihenfolge. Zwei Attribute und zwei Knöpfe, mehr braucht es nicht.
Div Wer bist du? fpu-form-element="step"
fpu-form-step-id="art"
Div Firmendaten fpu-form-element="step"
fpu-form-step-if="kundenart=firma"
Div Privatdaten fpu-form-element="step"
fpu-form-step-if="kundenart=privat"
Div Absenden fpu-form-element="step"Jeder Schritt bekommt eine ID und eine Bedingung. Wer „Firma“ wählt, sieht die Firmen-Schritte; wer „Privat“ wählt, überspringt sie. Fortschritt und Zähler rechnen automatisch mit dem kürzeren Weg.
<form fpu-form-element="form">
<div fpu-form-element="step" fpu-form-step-name="Kontakt">
<input name="e-mail" type="email" required>
</div>
<div fpu-form-element="step" fpu-form-step-name="Projekt">
<textarea name="projekt" required></textarea>
</div>
<button fpu-form-element="prev">Zurück</button>
<button fpu-form-element="next">Weiter</button>
<input type="submit" value="Absenden">
</form>Zwei Wege führen zum Ziel, und sie lassen sich mischen. Eine Bedingung am Schritt entscheidet, ob der Schritt überhaupt zum Weg gehört. Ein Sprungziel an der Antwort schickt direkt zu einem bestimmten Schritt. Übersprungene Schritte zählen weder im Fortschritt noch im Zähler, werden nicht geprüft und ihre Felder werden abgeklemmt — sie landen also auch nicht im Submit.
<!-- Schritt 2: die Auswahl -->
<div fpu-form-element="step" fpu-form-step-id="auswahl">
<label><input type="radio" name="ziel" value="website"> Website</label>
<label><input type="radio" name="ziel" value="shop"> Onlineshop</label>
<label><input type="radio" name="ziel" value="support"> Support</label>
</div>
<!-- Danach kommt nur, was zur Antwort passt -->
<div fpu-form-element="step" fpu-form-step-if="ziel=website">…</div>
<div fpu-form-element="step" fpu-form-step-if="ziel=shop">…</div>
<div fpu-form-element="step" fpu-form-step-if="ziel=support">…</div>
<!-- Immer am Ende -->
<div fpu-form-element="step" fpu-form-step-id="absenden">…</div>Ohne Zutun prüft die Lösung beim Weiter alle sichtbaren Felder des Schritts und zeigt die Browser-Sprechblase. Sobald du irgendwo im Formular ein Fehler-Element setzt, wandert der Text dorthin — gestaltet im Designer, sichtbar nur im Fehlerfall. Was geprüft wird, kommt weiter aus den gewohnten Webflow-Feldeinstellungen (Required, Typ, Muster, Länge).
stepBeim Klick auf Weiter wird der sichtbare Schritt geprüft.<div fpu-form-element="field">
<label for="mail">E-Mail</label>
<input id="mail" name="e-mail" type="email" required
fpu-form-label="deine E-Mail"
fpu-form-message-required="Ohne {label} können wir nicht antworten."
fpu-form-message-email="Da fehlt noch das @.">
<div fpu-form-element="error" fpu-form-error-for="e-mail"></div>
</div>Attribute wirken erst auf der veröffentlichten Seite — im Designer bleibt der Stapel aus Schritten sichtbar, das ist richtig so. Passiert nichts, hilft fpu-form-logging=„true“ am Formular: die Konsole meldet dann in einer Zeile, wie viele Schritte gefunden wurden und wie viele davon gerade zum Weg gehören.
Alle drei rechnen mit dem aktuellen Weg: Fällt ein Schritt durch eine Verzweigung weg, zählt er nirgends mit. Die Elemente dürfen auch außerhalb des Formulars liegen — dann verbindet sie fpu-form-instance mit dem richtigen Formular.
Webflow kann Radios und Checkboxen gestalten, aber nicht als ganze Kachel klickbar machen und nicht „mindestens eine Auswahl“ erzwingen. Genau das ergänzt diese Lösung. Für gestaltete Dropdowns bleibt das native Select das Formularfeld — kombiniere es mit fpu-select (Custom Form Select); Fokus und Fehlermarkierung landen dann automatisch auf dem sichtbaren Auslöser.
<div fpu-form-element="group"
fpu-form-group="ziel"
fpu-form-required="true"
fpu-form-auto-next="true"
fpu-form-label="ein Ziel"
fpu-form-message-group-required="Bitte wähl aus, worum es geht.">
<label fpu-form-element="choice">
<input type="radio" name="ziel" value="website" fpu-form-goto="website">
<span>Neue Website</span>
</label>
<label fpu-form-element="choice">
<input type="radio" name="ziel" value="shop" fpu-form-goto="shop">
<span>Onlineshop</span>
</label>
<div fpu-form-element="error" fpu-form-error-for="ziel"></div>
</div>falseEingaben und den erreichten Schritt in der Sitzung sichern und beim Zurückkommen wiederherstellen. Passwörter, Dateien und versteckte Felder werden nie gespeichert; nach erfolgreichem Absenden wird alles gelöscht.falseBei jedem Schrittwechsel an den Anfang des Formulars scrollen. Bei langen Schritten fast immer richtig.falseEine Zeile in der Konsole beim Start: Version, Anzahl Schritte, Prüfmodus.<script>
window.fpuFormStepsConfig = {
persist: true,
scroll: true,
validate: "live",
countTemplate: "Schritt {current} von {total}",
messages: {
required: "Das brauchen wir noch.",
email: "Bitte eine gültige E-Mail.",
},
};
</script>Enter in einem Feld heißt Weiter statt Absenden, außer im letzten Schritt. Alt+Pfeil rechts und links blättern, solange der Fokus nicht in einem Textfeld oder Dropdown liegt. Nach jedem Wechsel springt der Fokus auf das erste Feld des neuen Schritts.