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
   
Sexy jQuery Plugin For Progressive Minimal Form - Promin

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

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.