Jul 21 2013

Progression.js: jQuery Plugin Takes the Pain out of Inescapable Web Forms

Advertisement

From the UK, West Yorkshire county, city of Leeds stems a fresh jQuery plugin, that promises to help visitors fill out web forms by assisting them and providing progress updates. This is the more helpful the longer a form gets – and we all know, web forms can get reeaaallly looong. Two data attributes, added to the form fields, care for keeping track of where the visitor is and what he is supposed to do there.

progression-js-01

Forms: Hate-Love

Forms, who has never been confronted with one? In digital and analogue life alike, there is no getting round this bureaucratic inheritance of the dark age. My best feeling towards filling out even another form is: resignation – knowing there are no valid alternatives to it.

Also and especially in web design, when it comes to user interaction, there will always be forms involved. Fortunately, today we got ways of beautifying these monsters. I remember the 90s and it makes me shiver…

Aaron Lumsden from the United Kingdom delivers a simple method of making the filling out of forms a lot less tedious. This starts with showing context-sensitive tool tips where needed. Additionally, the plugin is able to show a progress bar alongside each form field, informing your visitors how many percent of the form they already stood – probably nice to have in longer forms. Either the tool tip or the progress bar can be omitted – if you want to omit both, don’t use the plugin ;-)

progression-js-02

It is getting more and more common in today’s jQuery plugins to rely on HTML5 data attributes. That way, content needed for the execution of functions can be placed right inside the HTML source code without being shown to the visitor. The content of the data-attribute is targeted by the jQuery plugin.

Progression.js: Simple as Possible, but Not Simpler

Integrating the plugin in your own project is simple. You start with embedding jQuery, Progression.js and the corresponding CSS:

1
2
3
<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>

Each form that you want to target with Progression.js, needs to be equipped with a unique ID:

1
2
3
4
5
6
<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>

The data attribute data-progression cares for showing the progress bar. The attribute data-helper contains the content of the tool tip. So far, so good. Finally we invoke the plugin on the form via the given ID:

1
2
3
4
5
$(document).ready(function ($) {
 
    $("#myform").progression();
 
});

Now we got Progression.js working with default values. If you want more control on the presentation, there are a variety of parameters to fiddle around with. In the “worst” case, our function call might look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$("#myform").progression({
        tooltipWidth: '200',
        tooltipPosition: 'right',
        tooltipOffset: '50',
        showProgressBar: true,
        showHelper: true,
        tooltipFontSize: '14',
        tooltipFontColor: 'fff',
        progressBarBackground: 'fff',
        progressBarColor: '6EA5E1',
        tooltipBackgroundColor: 'a2cbfa',
        tooltipPadding: '10',
        tooltipAnimate: true
    });

I will not explain each parameter as they got labels which I find self-explanatory. Fine-tuning the presentation parameters it should be possible to support any need and any design guideline.

Progression.js is merely a few weeks old and can be downloaded freely from Github. A license is not attached, but as Aaron confirmed, you are allowed to use the plugin for private and commercial projects alike:

Progression.js resembles Intro.js slightly. Intro.js is a little more capable as it is not limited to forms. With Intro.js you can guide your visitors around the site, leading them to areas you want them to notice – most likely updated or new features. We introduced Intro.js earlier, find the link below this article.

Which tool do you use, in these cases where you want or have to assist visitors on websites?

Related Links

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form
search form
 
image description image description