Submit your widget

Super cool stylish forms with jQuery

Created 5 years ago   Views 14850   downloads 3588    Author aarondo
Super cool stylish forms with jQuery
View DemoDownload 9.5 KB
60
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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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">
    <p>
        <label for="">Name</label> 
        <input data-progression="" type="text" data-helper="Help users through forms by prividing helpful hinters" name="name" value="" placeholder="" />
    </p>
  </form>

Read more:https://github.com/aarondo/progression.js