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
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.
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>
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>
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>
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>
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 |
This plugin has been tested in all the following browsers:
I've used the following fonts and icon fonts for the preview page:
IcoMoon
Marmelad font