Create a multi-step form in Webflow using ChatGPT

Create a multi-level form in Webflow — without external tools

Want to create a multi-level form for your Webflow website, but don't want to use any external scripts or tools? No problem! In this article, I'll show you step by step how you can implement this.

Basic structure of a multi-level form in Webflow

A multi-level form consists of several form steps that are run through one after the other. In Webflow, you can do that by taking each step in its own Divelement with class form-step accommodated. In addition, you need:

✅ Navigation buttons (Weiter and Back)
✅ A progress bar
✅ Areas for success and error messages

Step 1: Build a form in Webflow

1. Create a form block: Add a form block and paste into it Div with the class shape wrapper on.
2. Add form steps: Each step gets its own Div with the class form-step and the appropriate input fields.
3. Insert navigation: Below the steps is a Div with the class progress-nav, which contains the buttons and the progress bar.
4. Insert success and error messages: Place a Success message And a error-messageto clearly inform users.

Step 2: Add functionality with ChatGPT

We use a simple JavaScript script so that the form can navigate between steps and the entries are checked. ChatGPT can help you generate such a script.

Sample navigation script:

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);
});


👉 This script ensures that only one step is visible at a time and checks whether all mandatory fields have been filled out before continuing.

Step 3: Integrate the script with Webflow

1. Insert script: Copy the JavaScript code and paste it into Webflow at Page settings > Custom Code in the area Footer Code one.
2. Publish: Save your changes and publish the website.

Additional tips

💡 Improve styling: Use a library like Nice Selectto make dropdowns more beautiful.
💡 Animate the progress bar: Dynamically adjust the width of the progress bar to the current step.
💡 Optimize error messages: Make sure that errors are clearly displayed when users forget fields.

With this method, you can create a professional multi-level form in Webflow — without external tools! 🚀 Have fun implementing it! 😃