Multistage Form in WIX

In this tutorial we'll learn how to Create a form split into multiple steps.

You can use the following:

Edit form

View Example

Code used:

function showPassengers() {
    $w('#slideshow').changeSlide(0);
    $w('#passengers').disable();
    $w('#reviews').enable();
    $w('#confirmation').enable();
    $w('#passengersLine').show();
    $w('#reviewsLine').hide();
    $w('#confirmationLine').hide();
}

function showReviews() {
    $w('#slideshow').changeSlide(1);
    $w('#passengers').enable();
    $w('#reviews').disable();
    $w('#confirmation').enable();
    $w('#passengersLine').hide();
    $w('#reviewsLine').show();
    $w('#confirmationLine').hide();
}

function showConfirmation() {
    $w('#slideshow').changeSlide(2);
    $w('#passengers').enable();
    $w('#reviews').enable();
    $w('#confirmation').disable();
    $w('#passengersLine').hide();
    $w('#reviewsLine').hide();
    $w('#confirmationLine').show();
}

export function passengers_onClick(event) {
    showPassengers();
}

export function reviews_onClick(event) {
    showReviews();
}

export function confirmation_onClick(event) {
    showConfirmation();
}

export function buttonConfirmAndContinue_onClick(event) {
    showReviews();
}

export function buttonBookNow_onClick(event) {
    showConfirmation();
}

export function done_onClick(event) {
    showPassengers();
}

How We Built It

This example demonstrates how to use a slideshow element to create a form with a multistep layout. Each step in the form has its own dedicated slide in the slideshow. We also display a list of all the steps at the top of the page so users can go back, or skip a step. This list is not part of the slideshow.

To use the slideshow for splitting a form into steps, you need to turn off its autoplay feature (in Settings). Additionally, turn off the navigation arrows and slide buttons (in Layout).

Next Steps

1. Open this example in the Editor to work with the template.

2. Publish the site.

3. Learn how to work with examples in Velo.

APIs We Used

$w.Slideshow API. Learn more about Slideshow API from here.