Mehrstufiges Formular in Webflow erstellen – ohne externe Tools

Du möchtest ein mehrstufiges Formular für deine Webflow-Website erstellen, aber keine externen Skripte oder Tools verwenden? Kein Problem!

In unserer Webflow Agentur setzen wir sowas häufig um und in diesem Artikel zeige ich dir Schritt für Schritt, wie du das umsetzen kannst.

Grundstruktur eines mehrstufigen Formulars in Webflow

Ein mehrstufiges Formular besteht aus mehreren Formularschritten, die nacheinander durchlaufen werden. In Webflow kannst du das erreichen, indem du jeden Schritt in einem eigenen div-Element mit der Klasse form-step unterbringst. Zusätzlich brauchst du:

✅ Navigationsbuttons (Weiter und Zurück)
✅ Eine Fortschrittsanzeige
✅ Bereiche für Erfolgs- und Fehlermeldungen

Schritt 1: Formular in Webflow aufbauen

1. Formularblock erstellen: Füge einen Formularblock hinzu und lege darin ein div mit der Klasse form-wrapper an.
2. Formularschritte hinzufügen: Jeder Schritt bekommt ein eigenes div mit der Klasse form-step und den passenden Eingabefeldern.
3. Navigation einfügen: Unterhalb der Schritte kommt ein div mit der Klasse progress-nav, das die Buttons und den Fortschrittsbalken enthält.
4. Erfolgs- und Fehlermeldungen einfügen: Platziere eine success-message und eine error-message, um Nutzer:innen klar zu informieren.

Schritt 2: Die Funktionalität mit ChatGPT hinzufügen

Damit das Formular zwischen den Schritten navigieren kann und die Eingaben überprüft werden, nutzen wir ein einfaches JavaScript-Skript. ChatGPT kann dir helfen, so ein Skript zu generieren.

Beispiel-Skript für die Navigation:

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 sorgt dafür, dass immer nur ein Schritt sichtbar ist und überprüft, ob alle Pflichtfelder ausgefüllt wurden, bevor es weitergeht.

Schritt 3: Das Skript in Webflow integrieren

1. Skript einfügen: Kopiere den JavaScript-Code und füge ihn in Webflow unter Seiteneinstellungen > Custom Code im Bereich Footer Code ein.
2. Veröffentlichen: Speichere deine Änderungen und veröffentliche die Website.

Zusätzliche Tipps

💡 Styling verbessern: Nutze eine Bibliothek wie Nice Select, um Dropdowns schöner zu gestalten.
💡 Fortschrittsanzeige animieren: Passe die Breite der Fortschrittsleiste dynamisch an den aktuellen Schritt an.
💡 Fehlermeldungen optimieren: Stelle sicher, dass Fehler klar angezeigt werden, wenn Nutzer:innen Felder vergessen.

Mit dieser Methode kannst du ein professionelles mehrstufiges Formular in Webflow erstellen – ohne externe Tools! 🚀 Viel Spaß beim Umsetzen! 😃