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.

Prerequisite:

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

I entered first manage state id name 'Details' and second state id name 'Address'.

Step 4: Add Input Field

Give the field title Address in the Text input settings in multistate box state2

• Add another input field City/State

• Give the field title in the Text input settings in City/State.

• Add Country & Pin code as other fields

Two Buttons added. Save & Continue Button ,Previous Button

Step 5: Add the third state Multistate Box

I entered third manage state id name 'Success'.

Add Vector Image

Add element -> decorative ->vector Image

Add heading (Successfully Completed)

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

To be able to add sort to a repeater , all the data must be in the CMS. For that, you need to enable CMS.

From the left side of the editor, select CMS Which is selected in the image.

Step 7: Create a Collection

You can create a collection in two ways:

• Select the CMS icon from the left window panel as you did in the last step, then click on Create Collection

• Or, Click on Add Element > CMS > Create Collection

Name your collection, for example, I gave "multiForm". Then click on Create.

Step 8:Add Fields to the Collection

Click on the "Title" Field > Edit to Edit your field name. I named it "First Name" .

Adding Text field

You can Add Text

Click on "Add field" (On the right side of the Title field) to Add other fields to the collection.

Now I am adding another field named 'Last Name".

Click on "Add field" to Add other fields to the collection.

Now I am adding another field named 'email".

Click on "Add field" to Add other fields to the collection.

Now I am adding another field named 'phone".

Click on "Add field" to Add other fields to the collection.

Now I am adding another field named 'Address".

Click on "Add field" to Add other fields to the collection.

Now I am adding another field named 'City/State".

Click on "Add field" to Add other fields to the collection.

Now I am adding another field named 'Country".

Click on "Add field" to Add other fields to the collection.

Now I am adding another field named 'Pin code".

Step 9: Insert Dataset to connect the elements to CMS

In order to connect the elements on your page with the content in your CMS, you have to add a dataset to the page (it will be invisible in the published website).

Add element > CMS > Dataset

Step 10: Configuring Dataset

Once you inserted the dataset click on it and select the settings.

Then Select Your Collection,

here I selected multiForm.

Step 11: Connect the Input Field to the Dataset

After you configure the dataset, click on the Input Field, and from the options click on "Connect to CMS".

Choose the "MultiForm" (Your dataset name) in the first drop-down.

After the last step, Below the dropdown, you can see the Elements section, Click on each element and connect it to the relevant fields.

Click on Input field value connect to First Name.

Likewise, connect other all elements to the respective fields.

Step 12: Add Progress Bar and Buttons

Show how much progress was made on a goal, an action taken by a visitor & more.

Add 3 circle button

Button Names are, 1, 2, 3

Step 13: Turn On Developer Mode

To configure the buttons, we need to enable "Dev Mode" in order to write a few lines of simple code.

On the top left of the window hover over Dev mode.

Then click on Turn on Developer Mode

Step 14: Giving Id to Elements

Following better coding standards, it is good to rename the 'id' of the elements, in this case, our elements are

First Name: #firstName

Last Name: #lastName

Email: #email

Phone Number: #phoneNumber

Multi State Box: #multiForm

Next: #nextButton

Address: #address

City/State: #city

Country: #country

Pincode: #pincode

Previous: #previousButton

Save & Continue: #saveButton

Progress Bar: #progressBar1

Circle Button: #button1

Circle Button: #button2

Circle Button: #button3

Step 15: Code

$w.onReady(function () {
  
    $w("#nextButton").onClick(() => {
        $w("#multiForm").changeState("Address");
        $w("#progressBar1").value = 50;
        $w("#button2").enable();
    });
   
    $w("#previousButton").onClick(() => {
        $w("#multiForm").changeState("Details");
        $w("#progressBar1").value = 0;
    });
    $w("#saveButton").onClick(() => {
        $w("#multiForm").changeState("Success");
        $w("#progressBar1").value = 100;
        $w("#button3").enable();
    });
    
    $w("#button1").onClick(function () {
        $w("#multiForm").changeState("Details");
        $w("#progressBar1").value = 0;

    });
    $w("#button2").onClick(function () {
        $w("#multiForm").changeState("Address");
        $w("#progressBar1").value = 70;

    });
  
    $w("#firstName, #lastName, #email, #phoneNumber").onChange(function () {
        if ($w("#firstName").value.length > 0 && $w("#lastName").value.length > 0 && $w("#email").value.length > 0 && $w("#phoneNumber")) {
            $w("#nextButton").enable();

        } else {
            $w("#nextButton").disable();
        }
    });
    $w("#address, #city, #country, #pincode").onChange(function () {
        if ($w("#address").value.length > 0 && $w("#city").value.length > 0 && $w("#country").value.length > 0 && $w("#pincode")) {
            $w("#saveButton").enable();

        } else {
            $w("#saveButton").disable();
        }
    });

    $w("#saveButton").onClick(function () {
        $w("#saveButton").label = "done..."
        $w("#saveButton").disable();
        $w("#multiForm").changeState("Success");
        $w("#button1").disable();
        $w('#button2').disable();

    });
    $w("#dataset1").onAfterSave(function () {
        $w("#saveButton").label = "submit";
        $w("#saveButton").enable();
        $w("#multiForm").changeState("Success");
        $w("#progressBar1").value = 100;
    })
    
});
$w("#dataset1").onError(function () {
    $w("#saveButton").label = "Error";
    $w("#saveButton").disable();
    $w("#button1").enable();
    $w('#button2').enable();
});

Step 16: Preview and Publish

On the top right side, click on "Preview" to see if your code is working. If it is working, then you can publish

---

You can visit the example website here.