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>