Form Timer: Formidable Forms

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.

The Code

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

<!–– Timer Scripts ––>
<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>

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.