DEV Community

Cover image for How to Create a Custom Multistep Form on Wix Studio Using Velo Code
Emmanuel Ajako
Emmanuel Ajako

Posted on

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

#webdev #wixstudiochallenge #website #wixstudio

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'); }) });
Enter fullscreen mode Exit fullscreen mode

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'); }) });
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)