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…

DemosFormidableTutorials
25 Jun 2018

Formidable Forms – CSS Isolation Demo

This demo was created using Formidable Forms and CSS only hover styles to create an isolation style hover effect. This…
DemosFormidable
25 Jun 2018

Formidable Forms – Text Input Styles 2

Form Style Options: Set 2 - This is the second set of advanced form styling options for text input fields…
Staff TimesheetDemosFormidableTutorials
14 Jul 2018

Staff Timesheet: Formidable Forms

This article details how to create a basic staff timesheet using Formidable Forms, ideal for home or remote workers or…