top of page

Multi-Step Form in Wix Studio



Velo Code:


$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);
    }
}

Enjoy!

bottom of page