Simple jQuery Step By Step Form Wizard Plugin - Minimal Form

File Size: 9.39 KB
Views Total: 4792
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple jQuery Step By Step Form Wizard Plugin - Minimal Form

Minimal Form is a simple jQuery plugin that generates a step-by-step form wizard with custom form validation rules via REGEX. Great for creating a nice clean registration form to enhance the user experience and save your webpage space.

How to use it:

1. Include the necessary jQuery library and jQuery UI in the document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

2. Include the minimal form plugin after jQuery library.

<script src="jQuery.minimalForm.js" ></script>

3. Create an empty container to place the registration form.

<div id="demo" >
</div>

4. The Javascript to generate a custom registration form into container 'demo' you just created.

$(document).ready(function() {
$(window).load(function() {

$('#demo').minimalForm({
//FORM OPTIONS GO HERE
success: "verifing..."
},[{
name: "firstname",
type: "text",
error: "enter first name",
placeholder: "firstname"
},{
name: "name",
type: "text",
error: "enter last name",
placeholder: "lastname"
},{
name: "company",
type: "text",
regex: ".*",
placeholder: "company"
},{
name: "email",
type: "text",
regex: "email",
error: "invalid email address",
placeholder: "[email protected]"
},{
name: "password",
type: "confirmPassword",
regex: "password",
error: "4-16 characters & contain at least 1 number",
placeholder: "password"
},{
name: "newsletter",
type: "select",
error: "select one",
placeholder: "subscribe to newsletter?",
options: {'yes, subscribe':'yes','no, dont subscribe':'no'}
}], function(data) {
//This is the function that will run after the form is completed. 
$('#Target').delay(750).animate({opacity: '0.0'}, 500, function() {
$(this).remove();
console.log(data);
alert("Form data has been logged to console (F12)");
});
});

});
});

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