Stopwatch / Form Timer: Formidable Forms

This guide details how to create a form timer / stopwatch field in a Formidable Form using some basic Javascript and a JS plugin called Count-Up-Timer-Stopwatch. This is a really useful feature that can be used to capture how long you spend on tasks and store them in a view. It also details how you can use the view to edit and continue with previous entries if required.

Demo - Form Timer

Timer Demo

The Code

Copy & paste the code below in to your ‘Before fields’ or ‘After fields’ section of your form.

<!–– Timer Scripts ––>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Count-Up-Timer-Stopwatch-jQuery-Countimer/dist/ez.countimer.js"></script>

<script type="text/javascript">
    jQuery( document ).ready(function() {
        $('.timer').countimer({
			autoStart : false
			});
    });
</script>

<script>
function myFunction() {
  document.getElementById("start").value = "Reset";
}
</script>

Within your form add a Single Line Text field and a HTML Field.

In the HTML field add the code below (these are Start / Stop / Resume buttons).

<input id="start" type="button" value="Start" onclick="$('.timer').countimer('start'); mytime=setTimeout('remind(10)',10000); myFunction()" />  <input id="stop" type="button" value="Stop" onclick="$('.timer').countimer('stop');" />  <input id="clear" type="button" value="Resume" onclick="$('.timer').countimer('resume'); mytime=setTimeout('remind(10)',10000)" />

Now go to the ‘Customize HTML‘ section of your form and find the Single Line Text field you just added and add class=”timer” to the [input] shortcode.

For example:

[input class="timer"]

And that’s about it.

Note: You can download the 3 scripts referenced above, store them on your own web-server and update the paths accordingly. This is generally good practice and may also be required by the organisations currently hosting them under their terms of service.

UPDATES / OPTIONAL ADD-ON:

1. If you would like to edit a saved time AND have the timer function continue using the saved value then you can replace the initial script with the updated script below. Change #field_8o1yl to the ID of your timer field.

Replace this:

<script type="text/javascript">
    jQuery( document ).ready(function() {
        $('.timer').countimer({
			autoStart : false
			});
    });
</script>

With this:

<script type="text/javascript">
    jQuery( document ).ready(function() {
        var timerSplit = $("#field_8o1yl").val().split(":");
        var savedHours = parseInt(timerSplit[0]);
        var savedMins = parseInt(timerSplit[1]);
        var savedSecs = parseInt(timerSplit[2]);
        var totalTime = ((savedHours*3600) + (savedMins*60) + (savedSecs*1))
     if( totalTime > 1){
        var calcTime = totalTime; 
}
     else {
        var calcTime = 0;
}
        $('.timer').countimer({
            autoStart: false,
            initSeconds: calcTime
        });
    });
</script>

2. If you would like to have an alert pop up onscreen to warn you when the timer is running (and stop you from accidentally navigating away from the page) then you can replace this:

<script>
function myFunction() {
  document.getElementById("start").value = "Reset";
}
</script>

with this:

<script>
function myFunction() {
    window.onbeforeunload = function(event) {
       event.returnValue = "Are you sure you want to leave?";
    };
    
    document.getElementById("start").value = "Reset";
}
</script>

Form Timer – Summary

This should be enough to give you fully working form timer / stopwatch field in your form.

If you liked this tutorial, visit our blog for more ways to improve your websites and workflow.

Let's Get Started

If you’re ready to get started with your next project click on the button below to try the Project Planner

TRY THE PROJECT PLANNER

You may also like…

Radio & checkbox stylesDemosFormidableTutorials
25 Mar 2019

Radio & Checkbox Styles: Formidable Forms

This guide will cover a neat workaround on how you can style custom radio buttons and checkboxes for your form…
Share a form entryFormidableTutorials
26 Mar 2019

Share a form entry between users

Share a form entry between multiple users: Formidable Forms There may come a point where multiple users may need to…
Tabbed SliderDemosFormidableTutorials
26 Jun 2018

Tabbed Slider: Formidable Forms

This demo was created using Formidable Forms and uses a JS powered tab / button slider instead of the standard…