formToWizard

Turn any webform into multi-step wizard with jQuery.

Features

Every form fieldset becomes a separate "step" with forward and back buttons, gracefuly degrading if no script available.

History

First, there was an amazing tutorial from Janko. Unfortunately there isn't a code repository and example comes without field validation.

Second, it was inherited by tutorial from iFadey. As for now, breadcrumbs is optional and plugin uses Validation Engine for step validation. There's no public repo too.

User artoodetoo made it neat, replaced hardcoded things with callbacks and options and published a repository at GitHub with couple of examples, from which this repo is forked.

Sample code

To use jQuery Validation plugin and see progress as growing color bar, do something like that:

var $signupForm = $( '#SignupForm' );

$signupForm.validate();

$signupForm.formToWizard({
    submitButton: '#SaveAccount',
    nextBtnName: 'Forward >>',
    prevBtnName: '<< Previous',

    validateStep: function(form, step) {
        return form.valid()
    },

    progress: function (i, count) {
        $("#progress-complete").width(''+(i/count*100)+'%');
    }
});

Options

• submitButton: (required) accepts any supported jQuery selector
• prevBtnName: Previous button label. Default: Next >
• nextBtnName: Next button label. Default: < Back
• prevBtnClass: Previous button class
• nextBtnClass: Next button class
• buttonTag: HTML tag used to generate Previous and Next buttons
• showProgress: If enabled, shows the steps breadcrumb
• showStepNo: If enabled, shows step numbers in breadcrumb
• validateStep: Validation callback before advancing to next step
• progress: If defined, fires a callback each time the user advances to next step

Live examples in jsfiddle

• example 1 from Junko: progress as step list, no validation
• example 2 from iFadey: progress like breadcrubms, Validate Engine plugin
• example 3 from artoodetoo: progress via callback as color bar, Validation plugin
• example 4 from caiorg: multiple forms support with independent Validation