Sexy jQuery Plugin For Progressive Minimal Form - Promin
File Size: | 12.3 KB |
---|---|
Views Total: | 3661 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Promin is a lightweight and sexy jQuery plugin for creating Progressive Minimal Form that allows you to break forms into smaller chunks that consumes less space. Good for creating a step by step registration form.
How to use it:
1. Include jQuery library and jQuery Promin Plugin on the page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.promin.js"></script>
2. Include required jQuery Promin CSS file on the web page
<link rel="stylesheet" type="text/css" href="css/promin.css" />
3. The HTML
<div id="demo"> <form action="#demo" id="form" enctype="application/x-www-form-urlencoded" method="post"> <div class="pm-steps"> <div class="pm-step"> <p>My name is Tim, what is yours?</p> <input type="text" name="name" autocomplete="off" /> </div> <div class="pm-step"> <p>Is there something you would like to say?<br /> <span class="muted">Protip: try writing a multiline text.</span></p> <textarea name="body" autocomplete="off"></textarea> </div> <p class="muted"> <input type="button" id="navigation" value="next" /> or press tab</p> </div> </form> </div>
4. Call the plugin
<script> $(document).ready(function() { $('#form').promin({ 'button': $('#navigation'), // jQuery element of the magic next/submit button 'labels': { 'next': 'next', 'submit': 'reply' } }); }); </script>
Change logs:
2015-11-18
- Update references
2014-06-16
- Going to next step focuses on first field
This awesome jQuery plugin is developed by timseverien. For more Advanced Usages, please check the demo page or visit the official website.