Multi-Step Form in Wix

Create your own custom multi-step form in Wix using multi-state boxes. In this fun lesson, you can easily create a custom form, put in the inputs on different states of a multi-state box, and use Velo to make it function properly.

Before you copy the code over to your website, we highly suggest you watch our video to learn how to properly set up your databases, multi-state boxes, and naming your elements:

LINK TO VIDEO

Now that you have set up your website, copy this code to your Wix website:

---

$w.onReady(function () { const myMutliState = $w('#myStateBox'); // Next $w("#btnStarted").onClick(() => { loadNext(myMutliState); }); $w("#btnEmail").onClick(() => { loadNext(myMutliState); }); // Back $w("#btnEmailBack").onClick(() => { loadBack(myMutliState); }); $w("#btnSaveBack").onClick(() => { loadBack(myMutliState); }); }); //LoadNext function loadNext(MultiState) { const states = MultiState.states; let current = MultiState.currentState; const indexCurrent = states.findIndex(state => state.id == current.id ); let indexNext = indexCurrent + 1; let next = indexNext < states.length ? states[indexNext].id : ''; goToState(MultiState, next); } //loadBack function loadBack(MultiState) { const states = MultiState.states; let current = MultiState.currentState; const indexCurrent = states.findIndex(state => state.id == current.id ); let indexBack = indexCurrent - 1; let back = indexBack >= 0 ? states[indexBack].id : ''; goToState(MultiState, back); } // goToState function goToState(multi, id) { if (id != '') { multi.changeState(id); } }

---

In order for this code to work on your website, make sure you either:

1. Name the elements on your website to match the code. Like "myStateBox", "btnStarted", "btnEmail", "btnEmailBack", and "btnSaveBack". OR
   

2. Change the code to match the names you made for your page elements.

Have Fun!