Submit your widget

Super cool stylish forms with jQuery

Created 6 years ago   Views 15558   downloads 3768    Author aarondo
Super cool stylish forms with jQuery
View DemoDownload 9.5 KB
Share |

This is a jQuery plugin that gives users real time hints & progress updates as they complete forms---Progression.js

Getting Started


Include the relevant files

Firstly include jQuery and the progression.css and progress.js files. Place these before </head> section

<link href='progression.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="progression.js"></script>
Create a form

You must give your form a unique ID. You then need to add a data attribute of data-progression to each element that needs to be a step in the form progression.

The helper text for the tooltip can be set by adding data-helper to the element. This is demonstrated below

<form id="myform">
        <label for="">Name</label> 
        <input data-progression="" type="text" data-helper="Help users through forms by prividing helpful hinters" name="name" value="" placeholder="" />

Read more: