- Du brauchst kein Plugin. Webflow hat kein eigenes Element für mehrstufige Formulare, deshalb blendet ein kurzes Script die Schritte innerhalb eines Formulars ein und aus.
- Bau jeden Schritt in einem eigenen Div. Gib jedem Schritt die Klasse form-step und ergänze Weiter- und Zurück-Buttons, einen Fortschrittsbalken sowie Erfolgs- und Fehlermeldungen.
- Nutz ChatGPT in vier kleinen Prompts. Zuerst die Navigation zwischen den Schritten, dann das Styling der Dropdowns, die Validierung und zum Schluss Absende-Button und Fortschrittsbalken.
- Füg das Script in den Footer-Code ein. Über Page settings > Custom code für eine einzelne Seite oder über die Site settings für alle Seiten, danach veröffentlichen.
- Teste auf deiner Staging-URL, nicht im Designer. JavaScript läuft nur auf veröffentlichten Seiten oder auf der Staging-Adresse („.webflow.io“).
- Prüf den Code von ChatGPT auf drei typische Fehler. Er kann dein Flexbox-Layout mit display: block überschreiben, die Validierung von Radio-Gruppen aushebeln und im letzten Schritt das falsche Element ausblenden.
Wichtigste Erkenntnisse
Ein Multi-Step-Formular in Webflow erstellen, ohne externe Tools
Du willst ein Multi-Step-Formular für deine Webflow-Website erstellen, aber keine externen Skripte oder Tools nutzen? Kein Problem! In diesem Artikel zeige ich dir Schritt für Schritt, wie du das umsetzen kannst.
Grundstruktur eines Multi-Step-Formulars in Webflow
Ein Multi-Step-Formular besteht aus mehreren Formular-Schritten, die nacheinander durchlaufen werden. In Webflow machst du das, indem du jeden Schritt in ein eigenes Div-Element mit der Klasse form-step packst. Zusätzlich brauchst du:
✅ Navigations-Buttons (Weiter und Zurück) ✅ Eine Fortschrittsleiste ✅ Bereiche für Erfolgs- und Fehlermeldungen
Schritt 1: Ein Formular in Webflow bauen
- Formular-Block erstellen: Füg einen Formular-Block hinzu und pack einen
Divmit der Klasseform-wrapperhinein. - Formular-Schritte hinzufügen: Jeder Schritt bekommt seinen eigenen
Divmit der Klasseform-stepund den passenden Eingabefeldern. - Navigation einfügen: Unter den Schritten kommt ein
Divmit der Klasseprogress-nav, der die Buttons und die Fortschrittsleiste enthält. - Erfolgs- und Fehlermeldungen einfügen: Platzier eine
success-messageund eineerror-message, um Nutzer klar zu informieren.
Schritt 2: Funktionalität mit ChatGPT hinzufügen
Wir nutzen ein einfaches JavaScript-Skript, damit das Formular zwischen Schritten navigieren kann und die Eingaben überprüft werden. ChatGPT kann dir helfen, so ein Skript zu generieren.
Beispiel-Navigations-Skript:
document.addEventListener('DOMContentLoaded', function () { const steps = document.querySelectorAll('.form-step'); const nextButtons = document.querySelectorAll('.next'); const prevButtons = document.querySelectorAll('.prev'); const form = document.querySelector('form'); let currentStep = 0; function showStep(step) { steps.forEach((el, index) => { el.style.display = index === step ? 'block' : 'none'; }); } function validateStep(step) { const inputs = steps[step].querySelectorAll('input, select, textarea'); for (let input of inputs) { if (!input.checkValidity()) { return false; } } return true; } nextButtons.forEach(button => { button.addEventListener('click', function () { if (validateStep(currentStep)) { currentStep++; if (currentStep < steps.length) { showStep(currentStep); } else { form.submit(); } } else { document.querySelector('.error-message').style.display = 'block'; } }); }); prevButtons.forEach(button => { button.addEventListener('click', function () { currentStep--; showStep(currentStep); }); }); showStep(currentStep); });
👉 Dieses Skript stellt sicher, dass immer nur ein Schritt sichtbar ist, und prüft, ob alle Pflichtfelder ausgefüllt wurden, bevor es weitergeht.
Schritt 3: Das Skript mit Webflow verbinden
- Skript einfügen: Kopier den JavaScript-Code und füg ihn in Webflow unter
Page Settings>Custom Codeim BereichFooter Codeein. - Veröffentlichen: Speicher deine Änderungen und veröffentliche die Website.
Zusätzliche Tipps
💡 Styling verbessern: Nutz eine Library wie Nice Select, um Dropdowns schöner zu machen. 💡 Fortschrittsleiste animieren: Pass die Breite der Fortschrittsleiste dynamisch an den aktuellen Schritt an. 💡 Fehlermeldungen optimieren: Stell sicher, dass Fehler klar angezeigt werden, wenn Nutzer Felder vergessen.
Mit dieser Methode kannst du ein professionelles Multi-Step-Formular in Webflow erstellen, ganz ohne externe Tools! 🚀 Viel Spaß bei der Umsetzung! 😃
Teile diesen Artikel
Artikel zuletzt aktualisiert:
FAQs
Kann ich in Webflow ein Multi-Step-Formular ohne Plugin bauen?
Ja. Webflow hat kein natives Element für mehrstufige Formulare, deshalb fügst du ein kurzes Script hinzu, das die Schritte innerhalb eines Formulars ein- und ausblendet. Plugins wie Formly und Inputflow sind optional.
Warum funktionieren meine Formular-Schritte im Webflow Designer nicht?
JavaScript läuft nicht im Designer. Veröffentliche die Website und teste auf deiner .webflow.io-Staging-URL. Sobald alles funktioniert, veröffentlichst du auf deiner Custom Domain.
Wo füge ich das Script für das Multi-Step-Formular in Webflow ein?
Füg es in den Footer-Code ein, der direkt vor </body> geladen wird. Nutz Page settings > Custom code, um es auf eine Seite zu beschränken, oder die Site settings, um es auf allen Seiten zu laden. Um Custom Code auf einer Custom Domain zu veröffentlichen, brauchst du einen kostenpflichtigen Webflow-Plan.
Warum zerstört das Script von ChatGPT mein Formular-Layout?
ChatGPT sieht dein Design nicht und setzt die Schritte deshalb womöglich auf display: block, was Flexbox überschreibt. Gib ihm deine Klassennamen, arbeite mit kleinen Prompts und setz jeden display-Wert, den es hinzufügt, zurück auf flex.
Wann sollte ich ein Tool wie Inputflow statt eines eigenen Scripts nutzen?
Nutz ein Tool, wenn der nächste Schritt von der Antwort der Nutzer abhängt. Ein einfaches Script geht die Schritte in fester Reihenfolge durch, während Inputflow je nach Eingabe unterschiedliche Pfade unterstützt. Für ein geradliniges mehrstufiges Lead-Formular reicht das Script aus dieser Anleitung.
