Minimal Clean Sign-up Form Wizard Plugin - jQuery multiStepForm

Minimal Clean Sign-up Form Wizard Plugin - jQuery multiStepForm

multiStepForm is a very small (~1kb minified) jQuery plugin which transforms your long html form into a wizard driven form slider for better user experience. Ideal for signup/registration forms.

1. Add the latest version of jQuery and the multiStepForm plugin's files to the html page.

<link rel="stylesheet" href="multi-form.css">
<script src="" 
<script src="multi-form.js"></script>

2. Add custom steps to your HTML form.

<div class="tab">Name:
  <p><input placeholder="First name..." name="fname"></p>
  <p><input placeholder="Last name..." name="lname"></p>
<div class="tab">Contact Info:
  <p><input placeholder="E-mail..." name="email"></p>
  <p><input placeholder="Phone..." name="phone"></p>
<div class="tab">Birthday:
  <p><input placeholder="dd" name="dd"></p>
  <p><input placeholder="mm" name="nn"></p>
  <p><input placeholder="yyyy" name="yyyy"></p>
<div class="tab">Login Info:
  <p><input placeholder="Username..." name="uname"></p>
  <p><input placeholder="Password..." name="pword" type="password"></p>

3. Create navigation buttons which enables the user to slide between wizard steps.

<div style="overflow:auto;">
  <div style="float:right;">
    <button type="button" class="previous">Previous</button>
    <button type="button" class="next">Next</button>
  <button type="submit">Save</button>

4. Create a group of circles which indicate the steps of the form wizard.

  <span class="step">1</span>
  <span class="step">2</span>
  <span class="step">3</span>
  <span class="step">4</span>

5. Enable the form wizard by calling the function on the form element.


6. Set the initial step on page load.

  defaultStep: 2

7. Triiger a function when the user submit the form.

  callback : function(){

This awesome jQuery plugin is developed by hirdeshvishwdewa. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 06.04.2018
  • Source