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

  • Multi-Stept form Long form subdivided in 2 steps(fieldsets)
  • Form submission Prevent forms from being submitted
  • Formeter styles Different styles and settings
  • Example
  • Javascript
Step1 - signup information

Step2 - personal information

Male Female

<script type="text/javascript">
    $(function(){
        $('#percentage').formProgress({
            speed : 250,
            style : 'blue',
            bubble : false,
            minPercent : false,
            selector : '.required'
        });

        $('.step1').on('click',function(e){
            e.preventDefault();
            $(this).parents('#step1').fadeOut('normal', function(){
                $('#step2').fadeIn();
            });
        });
        $('.step2').on('click',function(e){
            e.preventDefault();
            $(this).parents('#step2').fadeOut('normal', function(){
                $('#step1').fadeIn();
            });
        });
    });
</script>
  • Example
  • Javascript

<script type="text/javascript">
    $('#percentage8').formProgress({
        speed : 250,
        style : 'green',
        bubble : true,
        selector : '.required',
        minPercent : 70,
        message : 'Please complete all required fields !'
    });
</script>
                            
  • Example
  • Javascript

Male Female

Progress bar without percentage bubble

<script type="text/javascript">
    $(function(){
        $('#percentage').formProgress({
            speed : 600,
            style : 'red',
            bubble : false,
            selector : '.required'
        });
    });
</script>

Progress bar with percentage bubble and higher animation speed

<script type="text/javascript">
    $(function(){
        $('#percentage2').formProgress({
            speed : 1000,
            style : 'blue',
            bubble : true,
            selector : '.required'
        });
    });
</script>

Spectrum style and custom width

<script type="text/javascript">
    $(function(){
        $('#percentage').formProgress({
            speed : 400,
            style : 'spectrum',
            bubble : true,
            selector : '.required'
        });
    });
</script>

Green progress bar with custom height

<script type="text/javascript">
    $(function(){
        $('#percentage').formProgress({
            speed : 1500,
            style : 'green',
            bubble : false,
            selector : '.required'
        });
    });
</script>

Gray progress bar with custom width

<script type="text/javascript">
    $(function(){
        $('#percentage').formProgress({
            speed : 800,
            style : 'gray',
            bubble : false,
            selector : '.required'
        });
    });
</script>