top of page

How Do I Add Multi Step Form With Progress Bar

Hey there, Wix enthusiasts! Ever wondered how to make your website forms more user-friendly and engaging? Well, you're in the right place! In this easy-to-follow guide, we're going to show you how to create multistep forms with progress bars on Wix. No fancy jargon, just straightforward steps to level up your website game.


Before you start this tutorial, you need to create a Wix site

Step 1:Add the Multi State Boxes

Add elements -> interactive -> Multi State Boxes

Step 2:Add the text input field

Add element -> input-> Text Input To add, just drag the input field

Give the field title First name in the Text input settings in multistate box state1

  • Add another input field Last name

  • Give the field title in the Text input settings in Last name.

  • Add email & phone number as other fields

Add button and button name, I gave "Next".

Step 3: Add the second state multistate box

Step 4: Add Input Field

Step 5: Add the third state Multistate Box

Step 6: Enable CMS (Formerly Known as Content Manager)

Step 7: Create a Collection

Step 8:Add Fields to the Collection

Step 9: Insert Dataset to connect the elements to CMS

Step 10: Configuring Dataset

Step 11: Connect the Input Field to the Dataset

Step 12: Add Progress Bar and Buttons

Step 13: Turn On Developer Mode

Step 14: Giving Id to Elements

Step 15: Code

Step 16: Preview and Publish


7 views0 comments


bottom of page