How to Create a Custom Multistep Form on Wix Studio Using Velo Code

Creating a custom multistep form in Wix Studio using Velo Code allows for a seamless and interactive user experience. This guide will walk you through two different methods to implement a multistep form: a simple form with a progress bar slider and a numbered multistep form.

First Method: Simple Form with Progress Bar Slider

This method involves using a progress bar that updates as users navigate through the form steps.

Steps to Implement:

Add a Multi-State Box to your Wix site and name it #multiStateBox1.

Add a Progress Bar and name it #progressBar.

Add navigation buttons (Next & Previous) and assign the following IDs accordingly:

nextButton-Form2

nextButton-Form3

nextButton-Form4

previousButton-Form1

previousButton-Form2

previousButton-Form3

Insert the following Velo code:

$w.onReady(function () {
const MultiStepForm = $w('#multiStateBox1');
const ProgressBar = $w('#progressBar')

ProgressBar.value = 25;
// Next Button Functions
$w('#nextButton-Form2').onClick(()=>{
    ProgressBar.value = 50;
    MultiStepForm.changeState('Form2');
})

$w('#nextButton-Form3').onClick(()=>{
    ProgressBar.value = 75;
    MultiStepForm.changeState('Form3');
})

$w('#nextButton-Form4').onClick(()=>{
    ProgressBar.value = 100;
    MultiStepForm.changeState('Form4');
})

// Previous Button Functions
$w('#previousButton-Form1').onClick(()=>{
    ProgressBar.value = 25;
    MultiStepForm.changeState('Form1');
})
$w('#previousButton-Form2').onClick(()=>{
    ProgressBar.value = 50;
    MultiStepForm.changeState('Form2');
})
$w('#previousButton-Form3').onClick(()=>{
    ProgressBar.value = 75;
    MultiStepForm.changeState('Form3');
})
});

Second Method: Numbered Multi-Step Form

This approach includes numbered progress indicators for each step, enhancing usability.

Steps to Implement:

Add a Multi-State Box to your Wix site and name it #multiStateBox1.

Add four Progress Bars and name them:

progressBar-Form2

progressBar-Form3

progressBar-Form4

Add navigation buttons similar to the first method.

Insert the following Velo code:

$w.onReady(function () {
const MultiStepForm = $w('#multiStateBox1');
const ProgressBar2 = $w('#progressBar-Form2');
const ProgressBar3 = $w('#progressBar-Form3');
const ProgressBar4 = $w('#progressBar-Form4');

// Next Button Functions
$w('#nextButton-Form2').onClick(()=>{
    ProgressBar2.value = 100;
    MultiStepForm.changeState('Form2');
})

$w('#nextButton-Form3').onClick(()=>{
    ProgressBar3.value = 100;
    MultiStepForm.changeState('Form3');
})

$w('#nextButton-Form4').onClick(()=>{
    ProgressBar4.value = 100;
    MultiStepForm.changeState('Form4');
})

// Previous Button Functions
$w('#previousButton-Form1').onClick(()=>{
    ProgressBar2.value = 0;
    ProgressBar3.value = 0;
    ProgressBar4.value = 0;
    MultiStepForm.changeState('Form1');
})
$w('#previousButton-Form2').onClick(()=>{
    ProgressBar2.value = 100;
    ProgressBar3.value = 0;
    ProgressBar4.value = 0;
    MultiStepForm.changeState('Form2');
})
$w('#previousButton-Form3').onClick(()=>{
    ProgressBar2.value = 100;
    ProgressBar3.value = 100;
    ProgressBar4.value = 0;
    MultiStepForm.changeState('Form3');
})
});

Conclusion

Both methods provide an intuitive way for users to complete a form in steps, improving user experience. Choose the style that best fits your design and functional requirements.

For additional design inspiration, check out this Figma file for Multi-Step Forms: Figma Multi-Step Form Designs.