Schaden
Details
Umfeld
Ort
Versicherung
Kontakt
Abschluss
0% fertig
Meldung erfolgreich!
Ihre Daten sind bei uns eingegangen. Unser Team meldet sich werktags innerhalb von 2 Stunden bei Ihnen.
07071 97962-0
+497071979620
/multi-step-form
Mo. – Fr. 7 – 18 Uhr
schaden@mey-schadenservice.de
+4970719796260
140
80.000
7
20
8.500
9.500
Multi-Step Form
The form is built as a multi-step form, meaning the user completes one section at a time.
Each form step needs:
data-multi-step
The order of these elements in Webflow determines the order of the steps.
To continue to the next step, add:
data-multi-step-next
To go back to the previous step, add:
data-multi-step-prev
The Next button is automatically disabled until all required fields inside the current step are completed correctly.
By default, inputs, selects, textareas, radio buttons and checkboxes inside a step are treated as required.
Optional Fields
If a field should not be required, add:
data-multi-optional
The user can leave this field empty without preventing the form from continuing.
OR Fields
Sometimes a step should require one field OR another field instead of requiring both.
For this, add the same data-multi-or value to the fields that belong together.
For example:
data-multi-or="contact"
can be added to both an Email field and a Phone field.
The user then only needs to complete one of those fields to continue.
If both fields are empty, the Next button remains disabled.
You can create multiple separate OR groups by using different values, for example:
data-multi-or="contact"
data-multi-or="address"
Each group requires at least one completed field.
Do not mark individual OR fields as HTML/Webflow Required fields, because the multi-step script handles their required state automatically.
Radio Buttons & Checkboxes
Radio buttons and checkboxes are supported automatically.
Radio buttons with the same name are treated as one group, meaning at least one option needs to be selected.
For a group of checkboxes where the user only needs to select at least one option, place them inside an element with:
data-multi-checkbox-wrap
Selecting any checkbox inside that group will make the group valid.
Radio buttons and checkboxes can also have:
data-multi-step-next
directly on the input.
When the user selects that option, the form automatically continues to the next step.
Final Submit Button
The final form button should use:
data-multi-step-final
The script automatically converts this button into the form's submit button.
The final step is still validated before the form can be submitted.
Navigation & Progress
The form can display navigation and progress indicators.
data-multi-nav-link
Used for navigation items associated with a particular form section.
data-multi-bar-active
Used for the active progress bar. Its width is automatically updated as the user moves through the form.
data-multi-percentage
Displays the current form completion percentage automatically.
Dynamic Button Text
Some steps can change the text of a button depending on whether the user has entered content.
Add:
data-multi-content-input
to the relevant input.
Then add:
data-multi-content-button
to the associated button.
When the user enters content, the button text automatically changes to "Weiter".
Photo Upload
The photo upload functionality uses:
data-multi-photo-upload
for the file upload field and:
data-multi-photo-button
for its associated button.
Once a file has been uploaded, the button automatically changes to "Weiter" and the step validation is updated.
Saving Progress
A button with:
data-multi-save
allows the user to save their current form progress.
The form stores the entered information in the browser for up to 3 days.
When the user returns to the form on the same device/browser, their saved fields and current step are restored automatically.
File uploads are not saved.
Resetting the Form
Add:
data-multi-reset
to a button that should completely reset the form.
This clears the saved progress, resets all fields and returns the user to the first step.
Quick Attribute Reference
data-multi-step — Defines a form step.
data-multi-step-next — Continues to the next step.
data-multi-step-prev — Goes back to the previous step.
data-multi-step-final — Final form submit button.
data-multi-optional — Makes a field optional.
data-multi-or="group" — Groups fields where only one needs to be completed.
data-multi-checkbox-wrap — Checkbox group where at least one checkbox needs to be selected.
data-multi-nav-link — Form navigation item.
data-multi-bar-active — Progress bar indicator.
data-multi-percentage — Current progress percentage.
data-multi-content-input — Input used for dynamic button text.
data-multi-content-button — Button whose text changes when content is entered.
data-multi-photo-upload — Photo/file upload field.
data-multi-photo-button — Button connected to the photo upload.
data-multi-save — Saves the user's current form progress.
data-multi-reset — Clears the form and saved progress.
As long as the attributes are applied correctly and the form steps remain in the correct order, the script handles the navigation, validation and progress automatically.
Notfall-Service
Leckageortung
Notfall-Service
Rohrbruch
Kosten & Versicherung
Wer zahlt bei einem Wasserschaden?
Gebäude-, Hausrat- oder Haftpflichtversicherung? Wer bei einem Wasserschaden was zahlt – und was ohne Versicherung gilt.
Notfall? Jetzt anrufen:
Kostenlos
Mo. - Fr. 7 - 18 Uhr
Versicherung
Welche Versicherung zahlt?
Muss ich in Vorleistung gehen?
Mieter oder Eigentümer?
Keine Versicherung – was nun?
Kosten & Versicherung
Wer zahlt bei einem Wasserschaden?
Gebäude-, Hausrat- oder Haftpflichtversicherung? Wer bei einem Wasserschaden was zahlt – und was ohne Versicherung gilt.
Tel.-Beratung zu Kosten
Kostenlos
Mo. - Fr. 7 - 18 Uhr
Schaden melden
Wählen Sie, wie Sie uns erreichen möchten.
Notfall-Service
Erste Hilfe bei Wasserschaden
Kosten & Versicherung
Wer zahlt bei einem Wasserschaden?
Gebäude-, Hausrat- oder Haftpflichtversicherung? Wer bei einem Wasserschaden was zahlt – und was ohne Versicherung gilt.
Für Gewerbekunden
Immobilienwirtschaft, Hausverwaltung und Versicherer — mit eigenen Abläufen und Ansprechpartnern.