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="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 
        crossorigin="anonymous">
</script>
<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>
<div class="tab">Contact Info:
  <p><input placeholder="E-mail..." name="email"></p>
  <p><input placeholder="Phone..." name="phone"></p>
</div>
<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>
<div class="tab">Login Info:
  <p><input placeholder="Username..." name="uname"></p>
  <p><input placeholder="Password..." name="pword" type="password"></p>
</div>

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>
  </div>
</div>

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

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

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

$("form").multiStepForm();

6. Set the initial step on page load.

$("form").multiStepForm({
  
  defaultStep: 2
});

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

$("form").multiStepForm({
  
  callback : function(){
    console.log("save");
  }
});

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