Documentation

This is may help you.

With default settings You have to keep structure of form like this:

<form>
    <fieldset>
        <legend>Name of first step</legend>
        .. text or inputs for first step ..
    </fieldset>
    <fieldset>
        <legend>Name of second step</legend>
        .. text or inputs for second step ..
    </fieldset>
         :
         .
</form>
With help of options stepElement and stepNameElement you can change these elements.
Option Description Values Default
duration Length of animation time between steps. Number 1000
transition Animation function. slide | fade | 3d-cube | none 'slide'
linkNav Navigation as a link, simple text or clickable are only previous steps. true | false | 'prev' true
showNav Position of navigation. You can also hide navigation. true == 'top' 'top' | 'right' | 'bottom' | 'left' | true | false true
showNavNumbers If numbers in navigation aren't necessary, you can hide them. true | false true
showLegend Show headline legend on top of the content. true | false true
showButtons Show navigation buttons (Next, Prev, Finish) at bottom of the wizard. true | false true
nextBtn Template for next button. Class "next-btn" is necessary, other classes can be replaced. Javascript with HTML as default.
$('<a class="next-btn sf-right sf-btn" href="#">NEXT</a>')
prevBtn Template for previous button. Class "prev-btn" is necessary, other classes can be replaced. Javascript with HTML as default.
$('<a class="prev-btn sf-left sf-btn" href="#">PREV</a>')
finishBtn Template for finish button. Class "finish-btn" is necessary, other classes can be replaced. Javascript with HTML as default.
$('<input class="finish-btn sf-right sf-btn" type="submit" value="finish"/>')
onNext Function for any issue of your choice (for example control of validation. Name of function or anonymous function. First parameter is a number of actual step, second parameter is jquery wrap for wizard. function(from, data) {}
onPrev Function for any issue of your choice (for example control of validation. Name of function or anonymous function. First parameter is a number of actual step, second parameter is jquery wrap for wizard. function(from, data) {}
onFinish Function for any issue of your choice (for example control of validation. Name of function or anonymous function. First parameter is a number of actual step, second parameter is jquery wrap for wizard. function(from, data) {}
onSlideChanged Function for any issue of your choice (for example control of validation. Name of function or anonym function. First parameter is a number of actual step, second is the number of coming step. function(to, data) {}
height Height can be little tricky and you have 4 options to handle it. You can't use transition 3d-cube and height auto. 'first' (height as first step) | 'auto' (flexible height) | 'tallest' (height as tallest step) | number (height in pixels) 'first'
theme Graphics design for wizard 'sea' | 'sky' | 'simple' | 'circle' | 'sun' 'sea'
markPrevSteps Visually different previous steps false | true false
startStep Starting step after wizard is loaded Number (counting from 0) 0
rtl Right to left direction true | false false
stepElement Element or class for steps string 'fieldset'
stepNameElement Element or class which is a wrap for navigation label string 'legend'
disableEnter Disables transition when enter is pressed on some input true | false false
smallMobileNav Prevent hiding navigation titles on mobiles false | true true

Trigger events

Name Description Example
sf-loaded Is triggered after wizard is initialized.
$("#wizard_example_1").on('sf-loaded', function(e) {
    alert('Step form wizard was loaded');
})
sf-step-before Is triggered before transition to next/before
step and still can be interrupted.
$("#wizard_example_1").on('sf-step-before', function(e, from, to, data) {
    alert('Prepare for next step! Or not if you call preventDefault');
    e.preventDefault(); // this you have to call if you need to interrupt transition to next step
})
sf-step-after Is triggered after transition to next/before
step is done.
$("#wizard_example_1").on('sf-step-after', function(e, to, data) {
    alert('End of transition');
})
sf-finish Is triggered after transition to next/before
step was done.
$("#wizard_example_1").on('sf-finish', function(e, from, data) {
    alert('Sending form to process or not?');
    e.preventDefault(); // this you have to call if you need to interrupt submit form
})

What is the difference between options onNext/onPrev and event sf-step-before

There are a few differences. You can see it in example 7. Method onNext is executed before every step, that means if you are on step one and click to step five, then onNext is executed four times on each intermediate step and event sf-before-step only once. And another difference is that onNext is executed only if you go forward, but sf-before-step is executed even if you go back.

API Methods

Name Description Return Example
next(ifLastThenSubmit, data) For shifting step to next one. It will submit form if you call method on last step and first parameter is set to true. Data will be sent to events. true | false
var sfw = $("#wizard_example").stepFormWizard();
sfw.next();
prev(data) For shifting step to previous one. Data will be sent to events. true | false
var sfw = $("#wizard_example").stepFormWizard();
sfw.prev();
finish(data) For submitting form. Data will be sent to events. true | false
var sfw = $("#wizard_example").stepFormWizard();
sfw.finish();
goTo(index, data) Go to specific index. true | false
var sfw = $("#wizard_example").stepFormWizard();
sfw.goTo(2); // movo to third step
refresh If you need redrawing of wizard after pictures or font were loaded or something changed height or width of wizard. undefined
var sfw = $("#wizard_example").stepFormWizard();
sfw.refresh();
activeNext(value, valueForFinishButton) Activate or deactivate next button and activate or deactivate finish button undefined
sfw.activeNext(false, false)
// deactivate next and finish
activePrev(value) Activate or deactivate prev button undefined
sfw.activePrev(false) // deactivate prev
activeFinish(value) Activate or deactivate finish button undefined
sfw.activeFinish(true) // activate finish
activeStep(index, value) Activate or deactivate step in navigation. It will be still reachable via button. undefined
sfw.activeStep(2, true) // activate third step
disableStep(index, value) Disable or enable step in wizard. It will be skipped if it is possible. undefined
sfw.disableStep(1) // disable second step
sfw.disableStep(1, false) // enable second step
markStep(index, value) Add different style to specific step in navigation. undefined
sfw.markStep(0) // mark first step
sfw.markStep(0, false) // unmark first step
navLabel(index, label) Set or get label for step with index (counting from zero) undefined | string
sfw.navLabel(1, 'summary')
navNumber(index, num) Set number or char for step with index (counting from zero). It can break the layout if you are not careful enough. undefined
sfw.navNumber(0, 'ok') // change number to 'ok'
nextLabel(label) Set label for next button. undefined
sfw.nextLabel('Go go go')
prevLabel(label) Set label for prev button. undefined
sfw.prevLabel('Do not do this')
finishLabel(label) Set label for finish button. undefined
sfw.finishLabel('Send it')
addSpinner(index) Adding animated spinner to specific step (number) or 'next' or 'prev'. undefined
// next button is spinning
sfw.addSpinner('next')
// back to normal text
sfw.addSpinner('next', false) 
addStep(index, body) You can add whole step on index position. Body should contain stepNameElement. undefined
sfw.addStep(1, '<legend>name</legend>text..')
// add step to second position
removeStep(index) Remove whole step on index position. undefined
sfw.removeStep(1)
// remove step on second position
step(index) Return jQuery wrapped step by index. jQuery Object
sfw.step(2).addClass('my-css-class')
// add css class to step wrapper
navStep(index) Return jQuery wrapped navigation step by index. jQuery Object
sfw.navStep(2).addClass('my-css-class')
// add css class to navigation step
getActualStep() Return a number of actual active step. number
sfw.getActualStep()
// return number of active step

Advices

Using height: 'auto' and the wizard doesn't resize after ajax/validation/change-content

Don't forget to call method resfresh after some content of wizard is changed. For example if you use parsley and height is set to 'auto', then call function refresh after validation like:

var sfw = $("#wizard_example").stepFormWizard({
	height: 'auto',
	onNext: function(i, wizard) {
		var valid = $('form', wizard).parsley().validate('block' + i);
		sfw.refresh();
		return valid;
	},
	onFinish: function(i, wizard) {
		var valid = $('form', wizard).parsley().validate();
		sfw.refresh();
		return valid;
});

If you use ajax request, then call method 'refresh' after ajax is done.

var sfw = $("#wizard_example").stepFormWizard({height: 'auto'});
$.ajax({
    url: "test.html"
}).done(function() {
    sfw.refresh();
});

Modal window is broken

Your modal have to be outside of the wizard because themes are using position: relative and modal window doesn't show properly inside the wizard. But of course you still can have a trigger of your modal inside the wizard.

<form id="wizard">
    <fieldset> ... trigger modalBox ... </fieldset>
    <fieldset> ... </fieldset>
    <fieldset> ... </fieldset>
</form>
<div id="modalBox">Content of your modal</div>

If you have a reason why you can't render modal outside the wizard, then you have to put your modal outside by javascript. $('#modalBox').appendTo('body');

You can also set validation rules for your form:


    onNext: function(i) {
        if(!$('#wizard').validate()) { // validate() is your jquery validation plugin
            return false; // stay on this step until  valid inputs aren't entered
        }
        // OR
        if($('#some-input').val() > 10) {
            return true; // move to next step
        } else {
            return false; // do not move to next step
        }
    }
            

For some examples visit demonstration page

Examples