Formidable Forms: Stopwatch / Form Timer

This guide details how to create a form timer / stopwatch that can be used to capture how long you spend on tasks and store / edit them in a view.

Demo - Form Timer

Timer Demo

ClientTaskTime Spent
Client CConsultation00:00:38
Client BWeb-App Development01:20:55
Client AWeb Development00:48:07
Client DAnother Task00:01:03
Client EMore work…00:04:11

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>

Still have questions?

Still have questions or not sure where to start? Use our quick contact to ask us a question.

Start Planning

If you’re ready to get started click here to complete our Project Planner.

You may also like…

FormidableTutorials
26 Mar 2019

Formidable Forms: File Upload Folder

Formidable Forms: Changing the File Upload Folder The Problem: You may want to change the folder that files will be…
FormidableTutorials
26 Mar 2019

Formidable Forms: Create an Invoicing system

Formidable Forms: Create an Invoicing system Here’s a guide on how to use Formidable Pro to create an invoicing system…
FormidableTutorials
26 Mar 2019

Share a form entry between users

Formidable Forms: Create a shared entry & view The Problem In some cases you may need to build a form…