Create Minimal Clean Multi-Step SignUp Form – multiStepForm Plugin

Create Minimal Clean Multi-Step SignUp Form – multiStepForm Plugin
Are you looking for a plugin to create quick Multi-Step SignUp form, If yes the Here I am going to share a plugin name multiStepForm for creating minimal clean multi-step signup form for your website. It is a very small jQuery+CSS library which transform your long html form into a wizard driven form in steps to server better user experience.

html multi-step signup form

Creating Minimal Clean Multi-Step SignUp Form

Libraries

First Load latest version of jQuery and after that load multiStepForm plugin’s JS+CSS library on page to create Multi-Step SignUp Form.

<!--CSS-->
<link rel="stylesheet" type="text/css" href="multi-form.css">
 
<!--JS-->
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="multi-form.js"></script>


HTML

Put you all form field under html div tabs, these tab class act as multistep 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>
	  <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>

Create navigation buttons which enables the user to slide between wizard step at any time user can goto any step.

<div style="text-align:center;margin-top:40px;">
	    <span class="step">1</span>
	    <span class="step">2</span>
	    <span class="step">3</span>
	    <span class="step">4</span>
</div>



JS

Finnaly call the plugin function to enable the milti step signup form wizard. You can also set default form step and use call back function when ever user click on save form button.

$(document).ready(function(){
	$("#myForm").multiStepForm(
	  {
	  // defaultStep:0, // Set the initial step on page load.
	     callback : function(){ // Triiger a function when the user submit the form.
			 console.log("save");
			}
	 }
	).navigateTo(0);
});

See live demo and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.


One Reply to “Create Minimal Clean Multi-Step SignUp Form – multiStepForm Plugin”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.