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

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.