FlowPowerUser

Form Steps

Stabildata-fpu-form · v1.0.0 · 10 kB gzip · kostenlos

Ein Webflow-Formular in mehrere Schritte teilen — mit Verzweigung, eigenen Fehlertexten und Auswahl-Kacheln.

Live-Demo ansehenPlatzhalterCloneable holenPlatzhalterQuellcode auf GitHub

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.

  • Verzweigung: Die Antwort in Schritt 2 entscheidet, welche Schritte danach überhaupt vorkommen.
  • Eigene Fehlertexte statt der Browser-Sprechblase, pro Feld oder pro Formular.
  • Pflichtfelder gelten schrittweise: Weiter geht erst, wenn der sichtbare Schritt vollständig ist.

Dieses <script> in den Custom Code deines Projekts

Einmal pro Projekt genügt, auch wenn du die Lösung auf mehreren Seiten nutzt: Project Settings → Custom Code → Footer Code. Das Skript lädt verzögert und startet nur, wenn es auf der Seite ein data-fpu-Attribut findet.

Footer Code · vor </body>
<script defer src="https://cdn.jsdelivr.net/npm/@flowpoweruser/attributes@1/form-steps.js"></script>

Aufbau des Formulars wählen

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:

Linear — jeder Schritt kommt dran

Empfohlen zum Start
Form Block          data-fpu-form-element="form"
└─ Form
   ├─ Div  Schritt 1   data-fpu-form-element="step"
   ├─ Div  Schritt 2   data-fpu-form-element="step"
   ├─ Div  Schritt 3   data-fpu-form-element="step"
   └─ Div  Knopfleiste
      ├─ Button        data-fpu-form-element="prev"
      ├─ Button        data-fpu-form-element="next"
      └─ Submit

Drei bis fünf Schritte in fester Reihenfolge. Zwei Attribute und zwei Knöpfe, mehr braucht es nicht.

Verzweigt — die Antwort entscheidet

Für Funnels
Div  Wer bist du?  data-fpu-form-element="step"
                  data-fpu-form-step-id="art"

Div  Firmendaten   data-fpu-form-element="step"
                  data-fpu-form-step-if="kundenart=firma"

Div  Privatdaten   data-fpu-form-element="step"
                  data-fpu-form-step-if="kundenart=privat"

Div  Absenden      data-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.

Diese nötigen Attribute an die Elemente hängen

Auf das Formular

Form Block oder Form
AttributWertBeschreibung
data-fpu-form-elementformSchaltet die Lösung für dieses Formular ein. Darf am Form Block oder am Form selbst hängen. Pflicht.

Auf jeden Schritt

Div-Block im Formular
AttributWertBeschreibung
data-fpu-form-elementstepMacht den Div-Block zu einem Schritt. Die DOM-Reihenfolge ist die Reihenfolge der Schritte. Pflicht.
data-fpu-form-step-nameKontaktAnzeigename des Schritts. Erscheint in {name} und in Elementen mit step-name.
data-fpu-form-step-idkontaktStabile ID. Nötig für Sprünge und Bedingungen, empfohlen, sobald sich die Reihenfolge noch ändern kann.

Auf die Knöpfe

Button · Link Block · Submit
AttributWertBeschreibung
data-fpu-form-elementnextWeiter. Prüft vorher den sichtbaren Schritt und bleibt stehen, wenn etwas fehlt. Pflicht.
data-fpu-form-elementprevZurück. Ohne Prüfung, und folgt dem tatsächlich gegangenen Weg — auch nach einem Sprung.
data-fpu-form-elementsubmitAbsenden. Nur im letzten Schritt aktiv. Ohne dieses Attribut übernimmt die Lösung den nativen Submit-Button des Formulars.
Ergebnis im Markup
<form data-fpu-form-element="form">
  <div data-fpu-form-element="step" data-fpu-form-step-name="Kontakt">
    <input name="e-mail" type="email" required>
  </div>

  <div data-fpu-form-element="step" data-fpu-form-step-name="Projekt">
    <textarea name="projekt" required></textarea>
  </div>

  <button data-fpu-form-element="prev">Zurück</button>
  <button data-fpu-form-element="next">Weiter</button>
  <input type="submit" value="Absenden">
</form>

Verzweigen: welche Schritte nach welcher Antwort kommen

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.

Am Schritt

Bedingung und Sprungziel
AttributWertBeschreibung
data-fpu-form-step-ifkundenart=firmaDer Schritt gehört nur zum Weg, wenn der Ausdruck wahr ist. Feldname links, Wert rechts.
data-fpu-form-step-idfirmaZiel-ID für Sprünge. Ohne ID zählt die Position des Schritts.
data-fpu-form-gotodankeStandard-Ziel nach diesem Schritt. Wird von einem Ziel am Knopf oder an der Antwort überstimmt.

An der Antwort

Radio · Checkbox · Option · Weiter-Knopf
AttributWertBeschreibung
data-fpu-form-gotofirmaIst diese Antwort gewählt, geht Weiter direkt zu dem Schritt mit dieser ID. Am Weiter-Knopf gilt das Ziel immer.

Ausdrücke in step-if

gleiche Syntax wie data-fpu-condition
AttributBeschreibung
plan=proGleichheit, Groß- und Kleinschreibung egal, Zahlen werden als Zahlen verglichen.
plan!=basicUngleichheit.
plan=basic|proMehrere erlaubte Werte für dasselbe Feld.
menge>=5Zahlvergleich, auch mit <, > und <=. „19,99“ wird verstanden.
newsletterNur der Feldname: wahr, sobald das Feld angehakt oder gefüllt ist.
plan=pro && menge>=5UND — beide Teile müssen stimmen.
plan=pro || plan=teamODER — bindet schwächer als UND, klammert also die UND-Gruppen.
Drei Antworten, drei Wege
<!-- Schritt 2: die Auswahl -->
<div data-fpu-form-element="step" data-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 data-fpu-form-element="step" data-fpu-form-step-if="ziel=website">…</div>
<div data-fpu-form-element="step" data-fpu-form-step-if="ziel=shop">…</div>
<div data-fpu-form-element="step" data-fpu-form-step-if="ziel=support">…</div>

<!-- Immer am Ende -->
<div data-fpu-form-element="step" data-fpu-form-step-id="absenden">…</div>

Eigene Fehlertexte statt der Browser-Sprechblase

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).

Wann geprüft wird

Am Formular oder am einzelnen Schritt
AttributWertStandardBeschreibung
data-fpu-form-validatestepstepBeim Klick auf Weiter wird der sichtbare Schritt geprüft.
data-fpu-form-validateliveZusätzlich beim Verlassen eines Felds — der Fehler steht sofort, nicht erst am Schrittende.
data-fpu-form-validatesubmitErst beim Absenden, dafür über alle Schritte des gegangenen Wegs.
data-fpu-form-validatenoneKeine eigene Prüfung. Sinnvoll für einen einzelnen Zwischenschritt ohne Felder.

Wo der Fehler steht

Text-Block im Formular
AttributWertBeschreibung
data-fpu-form-elementerrorTrägt den Fehlertext. Ist von sich aus versteckt und bekommt im Fehlerfall die Klasse fpu-form-error-visible.
data-fpu-form-error-fore-mailBindet das Element an ein bestimmtes Feld (dessen name oder id) oder an eine Gruppe. Ohne Angabe gilt das nächstgelegene Feld im selben Wrapper.
data-fpu-form-elementfieldOptionaler Wrapper um Label, Feld und Fehler. Bekommt im Fehlerfall fpu-form-field-invalid — praktisch für einen roten Rahmen.
data-fpu-form-elementsummaryZusammenfassung oben im Schritt: eine Liste aller Fehler, jeder Eintrag springt zum Feld.

Was der Fehler sagt

Am Feld, sonst am Formular
AttributWertBeschreibung
data-fpu-form-message-requiredWir brauchen deinen Namen.Pflichtfeld ist leer. Platzhalter {label} setzt den Feldnamen ein.
data-fpu-form-message-emailDa fehlt das @.Auch -url, -tel, -number und -pattern gibt es. Am Formular gesetzt gelten sie für alle Felder.
data-fpu-form-message-minlengthMindestens {min} Zeichen.Dazu -maxlength, -min, -max und -step. {min} und {max} setzen die Grenze ein.
data-fpu-form-messageBitte prüf das noch mal.Eine Meldung für jeden Fehler dieses Felds — praktisch, wenn ein Feld nur einen Fehlerfall hat.
data-fpu-form-labelE-Mail-AdresseKlartextname für {label}. Ohne das Attribut wird das Label, sonst der Platzhalter, sonst der Feldname genommen.
Ein Feld mit eigenem Fehlertext
<div data-fpu-form-element="field">
  <label for="mail">E-Mail</label>

  <input id="mail" name="e-mail" type="email" required
         data-fpu-form-label="deine E-Mail"
         data-fpu-form-message-required="Ohne {label} können wir nicht antworten."
         data-fpu-form-message-email="Da fehlt noch das @.">

  <div data-fpu-form-element="error" data-fpu-form-error-for="e-mail"></div>
</div>

Projekt veröffentlichen und das Formular auf der Live-Site durchklicken

Attribute wirken erst auf der veröffentlichten Seite — im Designer bleibt der Stapel aus Schritten sichtbar, das ist richtig so. Passiert nichts, hilft data-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.

OptionalBrauchst du nur, wenn du es brauchst — aufklappen
OptionalFortschritt, Zähler und IndikatorenBalken, „Schritt 2 von 4“, Punktleiste

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 data-fpu-form-instance mit dem richtigen Formular.

Anzeige-Elemente

AttributWertElementBeschreibung
data-fpu-form-elementprogressDiv BlockFortschrittsbalken. Die Breite wird in Prozent gesetzt, den Rest macht dein Styling.
data-fpu-form-elementstep-countText BlockZähler-Text. Standard „Schritt {current} von {total}“.
data-fpu-form-count-template{current}/{total} · {name}Text BlockEigenes Zähler-Format. Am Zähler-Element oder am Formular. Platzhalter: {current}, {total}, {name}.
data-fpu-form-elementstep-nameText BlockZeigt den Namen des aktuellen Schritts (data-fpu-form-step-name).
data-fpu-form-elementindicatorDiv BlockEin Punkt bzw. Reiter je Schritt, in DOM-Reihenfolge. Klickbar, aber nur zu bereits besuchten Schritten. Klassen: fpu-form-indicator-active, -visited, -locked.
data-fpu-form-indicator-forfirmaDiv BlockBindet einen Indikator fest an eine Step-ID. Ohne diese Bindung zählt die Position, und überzählige Indikatoren werden ausgeblendet.
OptionalEigene Auswahl-Elemente: Radios, Checkboxen, DropdownsKacheln, Gruppen-Pflicht, Auto-Weiter

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 data-fpu-select (Custom Form Select); Fokus und Fehlermarkierung landen dann automatisch auf dem sichtbaren Auslöser.

Auswahl-Kachel

Div-Block mit Radio oder Checkbox darin
AttributWertBeschreibung
data-fpu-form-elementchoiceDie ganze Fläche wird klickbar. Bei ausgewählter Antwort trägt sie fpu-form-choice-selected — dein Styling für den gewählten Zustand. Ist der Input optisch versteckt, übernimmt die Kachel Fokus und Tastatur.

Gruppe aus Radios oder Checkboxen

Div-Block um alle Antworten
AttributWertBeschreibung
data-fpu-form-elementgroupFasst die Antworten zu einer Einheit zusammen. Erst dann kann eine Auswahl Pflicht sein und einen eigenen Fehlertext bekommen.
data-fpu-form-requiredtrueMindestens eine Auswahl. Weiter geht erst danach.
data-fpu-form-min2Mindestzahl an Haken bei Checkbox-Gruppen.
data-fpu-form-max3Höchstzahl an Haken bei Checkbox-Gruppen.
data-fpu-form-groupinteressenName der Gruppe. Ein Fehler-Element mit data-fpu-form-error-for=„interessen“ zeigt dann deren Meldung.
data-fpu-form-message-group-requiredSuch dir eins aus.Eigener Text für die Gruppe. Dazu -group-min und -group-max mit {min} und {max}.
data-fpu-form-auto-nexttrueNach der Radio-Auswahl automatisch weiter. Auch am Schritt erlaubt. Das Typeform-Muster.
data-fpu-form-auto-next-delay260Verzögerung in Millisekunden, damit die Auswahl noch kurz sichtbar bleibt.
Pflicht-Auswahl mit Kacheln
<div data-fpu-form-element="group"
     data-fpu-form-group="ziel"
     data-fpu-form-required="true"
     data-fpu-form-auto-next="true"
     data-fpu-form-label="ein Ziel"
     data-fpu-form-message-group-required="Bitte wähl aus, worum es geht.">

  <label data-fpu-form-element="choice">
    <input type="radio" name="ziel" value="website" data-fpu-form-goto="website">
    <span>Neue Website</span>
  </label>

  <label data-fpu-form-element="choice">
    <input type="radio" name="ziel" value="shop" data-fpu-form-goto="shop">
    <span>Onlineshop</span>
  </label>

  <div data-fpu-form-element="error" data-fpu-form-error-for="ziel"></div>
</div>
OptionalWeitere EinstellungenZwischenspeichern, Scrollen, mehrere Formulare

Am Formular

AttributWertStandardBeschreibung
data-fpu-form-persisttrue · falsefalseEingaben 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.
data-fpu-form-scrolltrue · falsefalseBei jedem Schrittwechsel an den Anfang des Formulars scrollen. Bei langen Schritten fast immer richtig.
data-fpu-form-instance2Verbindet Elemente außerhalb des Formulars — Fortschritt, Zähler, Indikatoren, Knöpfe — mit genau diesem Formular. Nur nötig, wenn zwei Formulare auf einer Seite stehen.
data-fpu-form-loggingtrue · falsefalseEine Zeile in der Konsole beim Start: Version, Anzahl Schritte, Prüfmodus.
Globale Standards für alle Formulare
<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>
OptionalTastatur, Klassen und Eventsfür Animationen und eigenes Skript

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.

Klassen, die du stylen kannst

AttributBeschreibung
fpu-form-step-activeDer gerade sichtbare Schritt.
fpu-form-step-skippedEin Schritt, der durch eine Verzweigung gerade nicht zum Weg gehört.
fpu-form-invalidAm fehlerhaften Feld.
fpu-form-field-invalidAm Feld-Wrapper und an der Gruppe.
fpu-form-choice-selectedAn der gewählten Auswahl-Kachel.
fpu-form-btn-disabledAn Knöpfen, die im aktuellen Schritt nichts tun können.

Events auf document

AttributBeschreibung
fpu:form-step-changedNach jedem Wechsel. detail: form, index, total, stepId, stepIndex.
fpu:form-invalidFür jede gezeigte Meldung. detail: form, element, message.
fpu:form-validWenn ein Absenden die Prüfung bestanden hat und durchgelassen wird.
Mehr MöglichkeitenZusätzliche Features

Webflow-Submit bleibt unangetastet

Die Prüfung läuft vor Webflows eigenem Handler. Ungültige oder verfrühte Absendeversuche erreichen Webflow nie — Erfolgsmeldung, Fehlermeldung und alle angebundenen Dienste verhalten sich wie immer.

Zurück folgt dem echten Weg

Nach einem Sprung führt Zurück dorthin, wo man tatsächlich herkam, nicht zum vorherigen Element im Designer.

Aufräumbar

window.fpuFormSteps.destroyAll() nimmt alle Listener, Klassen und ARIA-Attribute zurück und stellt den Ausgangszustand her — für Seitenübergänge und Single-Page-Umgebungen.

Barrierefrei von Haus aus

Schritte sind Gruppen mit Namen, inaktive Schritte sind inert und für Screenreader weg, der Fortschritt ist eine Progressbar, Fehler werden als Alert angekündigt und mit aria-describedby ans Feld gehängt.

← ZurückCMS List Nestdata-fpu-nest
Zurück zu allen Attributen