FORMETER jQuery plugin

Version 1.3

Bring your forms to life by adding a beautiful progress bar to your contact form, CV, feedback or any other HTML form. Inform your users about the amount of data entered or if you'd like, prevent them to submit the form if the defined percentage has not been reached

A) Description

top

FORMETER is a jQuery plugin that will allow you to add a fancy progress bar on your registration, contact, settings, CV, feedback or profile form, so the users will be able to see the percentage of form completion.

Features

  • Flexible and super easy to add to existing websites
  • Fully customizable
  • Works with multi-step forms
  • Lightweight. The packed script weighs only 1.5kb
  • Prevent form from being submitted if the progress bar has not reached the percentage defined
  • 6 styles included: spectrum (from red to green), red, gray, green, orange, blue
  • Works in all the major browsers
  • You can change the width and height of each progress bar
  • Generate beautiful progress bars for any form
  • Well documented

B) How to install

top

Step 1 - Include javascript and CSS files

Extract all files, upload formeter.1.3.js to your server and include it together with jQuery in your webpage head tag or before the closing tag of body.
Also include a link to the formeter CSS stylesheet in your webpage head tag.

<link type="text/css" rel="stylesheet" href="formeter.1.3.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="formeter.1.3.js"></script>
                

Step 2 - Create the HTML

Add class required to each input that you want to recommend users to fill it.
Example:

<form action="" method="post">
    <input type="text" name="firstname" class="required" />
    <input type="text" name="lastname" />
    <select name="country" class="required">
        <option value="1">Brasil<option>
        <option value="2">Argentina<option>
        <option value="3">Italy<option>
    </select>
    <input type="submit" name="submit_form" value="Submit">
</form>
                

.meter is the class of the HTML Object that will wrap and set the width of progress bar.

<div class="meter">
    <div id="percentage"></div>
</div>
                

Step 3 - Activate the plugin

Call the plugin on the html element in which you want to show the progress bar.

You can place this piece of code in the header of the site before the tag </head> or, in the bottom of the site before the tag </ body>. Remember that this code should always be placed after jQuery library and formeter.1.3.js was loaded.

<script type="text/javascript">
    $(function(){
        $('#percentage').formProgress({
            speed : 500, // duration of the animation, expressed in milliseconds
            style : 'green', // CSS class assigned to the progress bar
            bubble : false, // Display percentage bubble under the progress bar
            minPercent : 45, // Prevents submitting if the user has not reached this percentage
            message : 'Please fill the required fields !', // The error message displayed to the user
            selector : '.required' // The class assigned to each "input", which we want to count
        });
    });
</script>
                

Our final plugin configuration - Basic setup

The code below will generate a simple HTML5 page, which will demonstrate the simplicity of implementation of the ForMeter plugin.

First, create an empty HTML file called index.html, copy and paste the code below into your HTML file, then copy the file "formeter.1.3.css" and "formeter.1.3.js" next to the HTML file. Open it in your awesome browser :) and ... voila.

Let’s take a quick look at an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Basic setup example</title>
        <link rel="stylesheet" href="formeter.1.3.css" />
        <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="formeter.1.3.js"></script>
        <script>
            $(function(){
                $('#percentage').formProgress({
                    speed : 500,
                    style : 'red',
                    bubble : true,
                    minPercent : false,
                    message : 'Please fill the required fields !',
                    selector : '.required'
                });
            });
        </script>
    </head>
    <body>

        <div class="meter">
            <div id="percentage"></div>
        </div>

        <form action="index.html" method="post">
            <p>
                <label>First name</label>
                <input type="text" name="first" value="John" class="required" />
            </p>
            <p>
                <label>Last name</label>
                <input type="text" name="last" />
            </p>
            <p>
                <label>Gender</label>
                <input type="radio" name="gender" value="0" class="required" />
                <span>Male</span>
                <input type="radio" name="gender" value="1" class="required" />
                <span>Female</span>
            </p>
            <p>
                <label>Subscribe to our newsletter</label>
                <input type="checkbox" name="newsletter" value="1" class="required" />
            </p>
        </form>

    </body>
</html>

C) Parameters

top

These parameters influence the appearance and functionality of the progress bar implemented in your website.
Please check the Advanced examples section to learn how to use and change these options.

Option Description Default
speed Animation duration in milliseconds 300
style This is the class or the ID that will stylize the progress bar green
bubble This option will enable the percentage bubble under the progress bar. You can reposition and stylize the percentage bubble as you wish, by editing the formeter.1.3.css file false
minPercent Prevents form submission if the user has not reached specified percentage false
message This is the error message that will be displayed to the users, when the specified percentage has not been reached Please fill the required fields !
selector Determine the fields you want to recommend visitors to complete them, and give them a class required .required

D) Compatible browsers

top

This plugin has been tested in all the following browsers:

  • Internet Explorer 6, 7, 8, 9 and 10
  • Firefox
  • Safari 5.1.2
  • Opera 10, 11 and 11.11
  • Chrome 11

E) Changelog

top
1.3 (Feb 05 2015)
Some compatibility issues have been fixed, so the plugin will work with the latest jQuery versions
Now, the animations are delayed, instead of trigger "animateBar" function on every keyup event
1.2 (Dec 11 2013)
The plugin has been completely rewritten
Progress bar no longer freezes after several type/clear or check/uncheck cycles
The bubble has been restyled
The progress bar has been restyled
Default selector changed
1.1 (Sep 10 2012)
The percentage bubble has been restyled
Was added a new feature that will allow you define the "minPercent" parameter and prevent forms from being submitted
Updated the documentation file
Was added a new example that illustrates how to implement the Formeter plugin with multi-step forms
1.0 (Aug 9 2012)
Initial release of Formeter jQuery plugin

F) Sources and Credits

top

I've used the following fonts and icon fonts for the preview page:
IcoMoon
Marmelad font