How to Build a Multi-Step Form in Webflow With ChatGPT

Want a multi-step form on your Webflow site without external scripts or form tools? You can build one with native Webflow elements and a short script that ChatGPT helps you write. I've done this many times over my ten years of building in Webflow, and in this guide I'll show you the setup and the mistakes to avoid.

Watch the Video Walkthrough

The video is about 15 minutes long. Chapters: what you will learn (00:00), structure of a multi-step form (00:57), ChatGPT prompting (02:33) and the final result (15:11).

How Is a Multi-Step Form Structured?

A multi-step form splits one long form into steps that users go through one after another. In Webflow, each step sits in its own Div with the class form-step. Around those steps you need:

• Navigation buttons (Next and Back)
• A progress bar
• A success message and an error message

If you'd rather skip the build, there's a cloneable with the script included. The link is in the video description.

Step 1: Build the Form in Webflow

1. ‍Add a form block. Place a form block on the page and add a Div with the class form-wrapper inside it.‍
2. Add the steps. Give each step its own Div with the class form-step and the input fields for that step.‍
3. Add the navigation. Below the steps, add a Div with the class progress-nav. It holds the Next and Back buttons (classes next and prev) and the progress bar.‍
4. Add the messages. Use Webflow's success message, and add an error message with the class error-message (for example "Please fill out all required fields").

In my demo form, step one is a group of radio buttons ("Choose a service"), step two has two dropdowns, step three is another radio group, and the last step is a text area.

Step 2: Add the Logic With ChatGPT

The script makes sure only one step is visible at a time, lets users move between steps, and checks required fields before they continue. Here's a working version you can paste in and adjust to your class names:

```javascriptdocument.addEventListener('DOMContentLoaded', function () {  const steps = document.querySelectorAll('.form-step');  const nextButtons = document.querySelectorAll('.next');  const prevButtons = document.querySelectorAll('.prev');  const form = document.querySelector('form');  const errorMessage = document.querySelector('.error-message');  const progressBar = document.querySelector('.progress-bar');  let currentStep = 0;  function showStep(step) {    steps.forEach((el, index) => {      el.style.display = index === step ? 'block' : 'none';    });    if (progressBar) {      progressBar.style.width = ((step + 1) / steps.length) * 100 + '%';    }    if (errorMessage) errorMessage.style.display = 'none';  }  function validateStep(step) {    const inputs = steps[step].querySelectorAll('input, select, textarea');    for (const input of inputs) {      if (input.type === 'radio' && input.required) {        const checked = steps[step].querySelector(          'input[name="' + input.name + '"]:checked'        );        if (!checked) return false;      } else if (!input.checkValidity()) {        return false;      }    }    return true;  }  nextButtons.forEach((button) => {    button.addEventListener('click', function () {      if (validateStep(currentStep)) {        if (currentStep < steps.length - 1) {          currentStep++;          showStep(currentStep);        } else {          form.requestSubmit();        }      } else if (errorMessage) {        errorMessage.style.display = 'block';      }    });  });  prevButtons.forEach((button) => {    button.addEventListener('click', function () {      if (currentStep > 0) {        currentStep--;        showStep(currentStep);      }    });  });  showStep(currentStep);});```

This script shows one step at a time, blocks the Next button until required fields are filled, and grows the progress bar with each step.

Step 3: Add the Script to Webflow

• Open Page settings > Custom code.
• Paste the script into the Footer code area.
• Save and publish the site. The script only runs on the published page, not in the Designer preview.

Lessons From Building This With ChatGPT

• ‍Use the newest model. In the video, ChatGPT 3.5 cost me over two hours without a working result, while for example GPT-4o got there with little effort.‍
• Give it context. Describe your class names and structure in detail, or link the page so ChatGPT can see the form.‍
• Go in small steps. Don't expect one prompt to produce the perfect script. I used four: step navigation first, then Nice Select for the dropdowns, then validation, then the submit button and progress bar.‍
• Check the layout it breaks. ChatGPT doesn't know you use Flexbox, so it may set elements to display: block or inline-block and break your layout. If something looks off, check the script for those values and change them to flex.‍
• Hide the right element. When I wanted to swap the navigation for a submit button on the last step, hiding the Next button wasn't enough. Hiding its parent (progress-nav) fixed it.‍
• Handle radio groups carefully. In a radio group, checking one option should be enough. Checking all of them makes validation fail.

Optional Improvements

• ‍Better dropdowns: Style select fields with a library like Nice Select. If you use it, destroy and re-initialize it each time the step changes, or the browser's default styling comes back.‍
• Animated progress bar: Set the width of the progress bar in percent (25%, 50%, 75%, 100% for four steps) and add a CSS transition.‍
• Clearer error messages: Show which field is missing, not just a general message.

Next Step

Once your form works, you may want to send the submissions to different recipients, for example sales inquiries to one person and support requests to another. For that and the rest of the form setup, see our guide about Webflow forms.