Below is an example of a basic horizontal form wizard.
Try the keyboard navigation by clicking arrow left or right!
Wonderful transition effects.
The next and previous buttons help you to navigate through your content.
HTML Code
<div id="wizard1">
<h3>Personal Information</h3>
<section>
<p>Try the keyboard navigation by clicking arrow left or right!</p>
</section>
<h3>Billing Information</h3>
<section>
<p>Wonderful transition effects.</p>
</section>
<h3>Payment Details</h3>
<section>
<p>The next and previous buttons help you to navigate through your content.</p>
</section>
</div>
Javascript Code
$('#wizard1').steps({
headerTag: 'h3',
bodyTag: 'section',
autoFocus: true,
titleTemplate: '#index# #title#'
});
A basic form wizard with form validation using Parsley js form validation plugin.
Try the keyboard navigation by clicking arrow left or right!
Wonderful transition effects.
The next and previous buttons help you to navigate through your content.
Additional Option Code
onStepChanging: function (event, currentIndex, newIndex) {
if(currentIndex < newIndex) {
// Step 1 form validation
if(currentIndex === 0) {
var fname = $('#firstname').parsley();
var lname = $('#lastname').parsley();
if(fname.isValid() && lname.isValid()) {
return true;
} else {
fname.validate();
lname.validate();
}
}
// Step 2 form validation
if(currentIndex === 1) {
var email = $('#email').parsley();
if(email.isValid()) {
return true;
} else { email.validate(); }
}
// Always allow step back to the previous step even if the current step is not valid.
} else { return true; }
}
A basic content wizard with vertical orientation.
Try the keyboard navigation by clicking arrow left or right!
Wonderful transition effects.
The next and previous buttons help you to navigate through your content.
Additional Option Code
stepsOrientation: 1
A basic wizard that adds a custom style to make the step indicator equal width.
Try the keyboard navigation by clicking arrow left or right!
Wonderful transition effects.
The next and previous buttons help you to navigate through your content.
Additional Option Code
cssClass: 'wizard step-equal-width'