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.
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.
<link rel="stylesheet" type="text/css" href="multi-form.css"> <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.
Create navigation buttons which enables the user to slide between wizard step at any time user can goto any step.
|
1
2
3
4
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.
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.