ForMeter - Form Completion Progress Bar

ForMeter - Form Completion Progress Bar

Plugin Description

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


  • Flexible and super easy to add to existing websites
  • Fully customizable
  • Lightweight. The packed script weighs only 1.8kb
  • 6 styles included: spectrum(from red to green), red, gray, green, orange, blue
  • Prevent forms from being submitted if the defined percentage has not been reached (optional)
  • 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

Parameter list

  • speed : animation duration in milliseconds
  • style : this is the class or the ID that will stylize the progress bar
  • bubble : this option will enable/disable the percentage bubble under the progress bar. You can reposition and stylize the percentage bubble as you wish, by editing the formeter.1.2.css file
  • minPercent : Prevents form submission if the user has not reached specified percentage
  • message : Error message that will be displayed to the users, when the specified percentage has not been reached
  • selector : Determine the fields you want to recommend visitors to complete them, and give them a class required

Compatible Browsers

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


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 use the Formeter plugin with multi-step forms

1.0 (Aug 9 2012)
* Initial release of Formeter jQuery plugin

Online demo and documentation

Follow me on Twitter or CodeCanyon for the latest updates.