Step Form Wizard 2 - Options

Here is all options of Step Form Wizard plugin.

Options

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. you can use false/true or some string with name of elements (class, id) separate by commas like ".thisClass, #thisID". These elements will be excluded from catching enter event. But be aware, you have to treat these elements by yourself to prevent to keypress enter submit form. 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 
sfw.addSpinner('next') // next button is spinning
sfw.addSpinner('next', false) // back normal text
addStep(index, body, numbers) You can add whole step on index position. Body should contain stepNameElement. Numbers parameter - false: prevent reindex, true: reindex numbers undefined 
sfw.addStep(1, '<legend>name</legend>body text..')
// add step to second position
removeStep(index, numbers) Remove whole step on index position from form. Numbers parameter - false: prevent reindex, true: reindex numbers undefined 
sfw.removeStep(1, false)
// 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
hideStep(index, value, numbers) Hide, but don't remove step from form. Value parameter - true: hide step, false: show step. Numbers parameter - false: prevent reindex, true: reindex numbers undefined 
// hide first step and reindex numbers
sfw.hideStep(1)
// show first step and don't reindex numbers
sfw.hideStep(1, false, false)

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');