Multistep

Introduction

Multistep form is a jQuery plugin for multipurpose step form wizard.


Getting Started

CSS

Copy-paste the stylesheet <link> into your <head>

<link rel="stylesheet" href="assets/css/multistep.css">

JS

Place the following <script> near the end of your pages, right before the closing </body> tag, to enable them. jQuery must come first, then Multistep.js.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="assets/js/multistep.js"></script>

Project Structure

After downloading, extract the files into the directory where your website is located. Your directory will look something like this.

You'll notice that there are two sets of the files. The min means that the file is "compressed" to reduce load times. These minified files are usually used in production while it is better to use the unminified files during development.

multistep
|--assets/
| |--css/
| | |--multistep.css
| | |--multistep.min.css
| |
| |--js/
| |--multistep.js
| |--multistep.min.js
|
|--index.html

HTML Setup

Next you just have to make sure you link the files properly in your webpage. Generally it is wise to import javascript files at the end of the body to reduce page load time. Follow the example below on how to import Multistep into your webpage.

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- CSS -->
<link rel="stylesheet" href="assets/css/multistep.css">
</head>
<body>
<div id="multistep">
<!-- Progress bar -->
<div class="ms-progress">

<!-- Sidebar navigation -->
<ul class="ms-navigation">
<li><a href="#section-1">...</a></li>
<li><a href="#section-2">...</a></li>
<li><a href="#section-3">...</a></li>
</ul>

<!-- Content -->
<div class="ms-container">
<div id="section-1">
<input data-ms regex="email" required>
</div>
<div id="section-2">...</div>
<div id="section-3">...</div>
</div>
</div>

<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="assets/js/multistep.js"></script>
</body>

Sass Setup

Instead of having a css folder, you will find that the download instead contains many .scss files which contain the styles of individual components. Unfortunately, the browser cannot interpret Sass, so you must have your Sass compiler compile the scss/multistep.scss into a regular CSS file. At this point you can link this newly outputted file in your HTML page.

multistep
|--assets/
| |--css/
| | |--multistep.css <-- compiled from scss/multistep.scss
| | |--multistep.min.css <-- compiled from scss/multistep.scss
| |
| |--scss/
| | |--components
| | |--multistep.scss
| |
| |--js/
| |--multistep.js
| |--multistep.min.js
|
|--index.html

Plugin Callback Functions

// default settings
$("#multistep").multistep();

// custom settings
$("#multistep").multistep({
theme: 'default', // jade / electric / crimson / prussian
keyController: true, // Enable/Disable keyboard controller
navigation: {
next: 'Next', // Next button text
prev: 'Previous', // Previous button text
submit: 'Submit', // Submit button text
btnNext: true, // Next button show/hide
btnPrev: true, // Previous button show/hide
btnSubmit: true, // Submit button show/hide
onSend: function() {
// Submit button onClick function
}
},
message: {
required: 'This field is required.', // Default validation message
radio: 'Please make a selection.', // Radio validation message
email: 'Please enter a valid email address.', // Email validation message
phone: 'Please enter a valid phone number.', // Email validation message
alphaWithSpace: 'Only alphabets are allowed.', // Alphabets only validation message
},
progress: true // Progress Bar show/hide
});

Templates

Default
Preview
Hotel Booking
Preview
Register Form - Modal Light
Preview
Register Form - Modal Dark
Preview
Payment
Preview