Ein Multi-Step-Formular in Webflow mit ChatGPT erstellen

Ein Multi-Step-Formular in Webflow erstellen, ohne externe Tools

Ihr wollt ein Multi-Step-Formular für eure Webflow-Website erstellen, aber keine externen Skripte oder Tools nutzen? Kein Problem! In diesem Artikel zeige ich euch Schritt für Schritt, wie ihr das umsetzen könnt.

Grundstruktur eines Multi-Step-Formulars in Webflow

Ein Multi-Step-Formular besteht aus mehreren Formular-Schritten, die nacheinander durchlaufen werden. In Webflow macht ihr das, indem ihr jeden Schritt in ein eigenes Div-Element mit der Klasse form-step packt. Zusätzlich braucht ihr:

✅ Navigations-Buttons (Weiter und Zurück)
✅ Eine Fortschrittsleiste
✅ Bereiche für Erfolgs- und Fehlermeldungen

Schritt 1: Ein Formular in Webflow bauen

1. Formular-Block erstellen: Fügt einen Formular-Block hinzu und packt einen Div mit der Klasse form-wrapper hinein.
2. Formular-Schritte hinzufügen: Jeder Schritt bekommt seinen eigenen Div mit der Klasse form-step und den passenden Eingabefeldern.
3. Navigation einfügen: Unter den Schritten kommt ein Div mit der Klasse progress-nav, der die Buttons und die Fortschrittsleiste enthält.
4. Erfolgs- und Fehlermeldungen einfügen: Platziert eine success-message und eine error-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 euch 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

1. Skript einfügen: Kopiert den JavaScript-Code und fügt ihn in Webflow unter Page Settings > Custom Code im Bereich Footer Code ein.
2. Veröffentlichen: Speichert eure Änderungen und veröffentlicht die Website.

Zusätzliche Tipps

💡 Styling verbessern: Nutzt eine Library wie Nice Select, um Dropdowns schöner zu machen.
💡 Fortschrittsleiste animieren: Passt die Breite der Fortschrittsleiste dynamisch an den aktuellen Schritt an.
💡 Fehlermeldungen optimieren: Stellt sicher, dass Fehler klar angezeigt werden, wenn Nutzer Felder vergessen.

Mit dieser Methode könnt ihr ein professionelles Multi-Step-Formular in Webflow erstellen, ganz ohne externe Tools! 🚀 Viel Spaß bei der Umsetzung! 😃