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.

---

$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!