JQuery StepForm is a simple plugin that converts a form into a sliding form
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


jQuery Stepform

jQuery StepForm is a simple plugin that converts any form into a sliding for

  • each of the steps can be grouped by the class .sf-step
  • user can slide to next step only after errors on inputs on current slide are validated
  • usability for keyboard enter and tab options
  • data binding for input values to be shown on confirmation screen


Include the Javascript and CSS in the head section

<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script type="text/javascript" src="jq.stepform.js"></script>

Use the html markup as below

<form class="stepform">
	<fieldset class="sf-step">
		<p><label class="control-label">Name</label><input class="form-control" name="name" data-validate="1"/></p>
		<p><label class="control-label">Email</label><input class="form-control" name="email" data-validate="email"/></p>
	<fieldset class="sf-step">
		<!-- input elements -->
    <fieldset class="sf-step">
        <!-- input elements -->

Initialize stepform

$(document).ready(function() {

API Documentation

  • data-validate is used to validate data added to input field
data-validate="1" 		// is a mandatory feild
data-validate="5" 		// should have a minimum of 5 characters
data-validate="email"  	// should be a valid email id

To Do

  • Multiple data validation functions using data-validate
  • Custom messages for validation
  • use jQuery validate function
  • onSubmit function
  • parameters to customize


jQuery Stepform is freely distributable under the terms of an MIT-style license.

Copyright notice and permission notice shall be included in all copies or substantial portions of the Software.


Paresh Masade / @masade