Get Current Time - Formidable Forms

Get Current Time – Formidable Forms

Formidable Forms Time Fields are really useful for capturing a time in a form entry. Essentially a dropdown field, they make it really easy for users to select a time and can be used in all sorts of ways on the back end too.

Recently we needed to find a way of making the time input even easier to use and wanted to be able to add a button that, when clicked, would automatically get the current time and set a time field for us.

Although we could have used the [time] shortcode as the default value for the field (as described in the FF KB here) this captures the current time when the form is loaded and what we needed was to be able to capture the time when the user decided they wanted it (i.e. when they click a button).

Here’s what we came up with:

Demo - Time Capture

Version 1

Time field using 12 hour clock and multi-dropdowns

Time

Get Current Time

Version 2

Time field using 12 hour clock and single dropdown

Time

Get Current Time

Version 3

Standard text field using 24 hour clock with seconds

Time

Get Current Time

How to do this

First you need to decide which demo version above best suits your needs. Once you have decided which time capture you need select the instructions below to get started.

Version 1

In the version 1 demo above we have our time field set-up as follows:

Time format = 12 hour clock
Show a single time dropdown = No
Step (min)= 1

Step 1:

Add a time field to your form and set it up as per the above settings
In the time field description box (or in a new html field if you prefer) add this:

<a onclick="getTime()" class="xsmall regular extra-color-1 regular-button">Get Current Time</a>

Note: Add / remove the classes as required.

Save the form.
Now go to the form Settings > Customise HTML > After Fields section and add this script:

<!-- Set Start Time -->
<script>
   function addZero(i) { 
     if (i < 10) { i = "0" + i; }
     return i;
   }
   function twelveHour(v) {
     if (v > 12) { v = v - 12; }
     return v;
   }
   
   function getTime() {
     var d = new Date();
     var z = d.getHours();
     var h = twelveHour(d.getHours());
     var m = addZero(d.getMinutes());
     var ampm = z >= 12 ? 'PM' : 'AM';
   
     document.getElementById("field_cqiey_H").value = h;
     document.getElementById("field_cqiey_m").value = m;
     document.getElementById("field_cqiey_A").value = ampm;
   }
</script>

Note: Replace cqiey in 3 places with your time field key.

E.g.

document.getElementById("field_YOUR_FIELD_KEY_H").value = h;
document.getElementById("field_YOUR_FIELD_KEY_m").value = m;
document.getElementById("field_YOUR_FIELD_KEY_A").value = ampm;

Save the form

And that’s it.

Version 2

In the version 2 demo above we have our time field set-up as follows:

Time format = 12 hour clock
Show a single time dropdown = Yes
Step (min)= 1

Step 1:

Add a time field to your form and set it up as per the above settings
In the time field description box (or in a new html field if you prefer) add this:

<a onclick="getTime()" class="xsmall regular extra-color-1 regular-button">Get Current Time</a>

Note: Add / remove the classes as required.

Save the form.
Now go to the form Settings > Customise HTML > After Fields section and add this script:

<script>
   function addZero(i) { 
     if (i < 10) { i = "0" + i; }
     return i;
   }
   function twelveHour(v) {
     if (v > 12) { v = v - 12; }
     return v;
   }
   
   function getTime() {
     var d = new Date();
     var z = d.getHours();
     var h = twelveHour(d.getHours());
     var m = addZero(d.getMinutes());
     var ampm = z >= 12 ? 'PM' : 'AM';
     var t = h + ":" + m + " " + ampm;
     document.getElementById("field_g2ki3").value = t;
   }
</script>

Replace g2ki3 in 1 place with your time field key
Save the form

And that’s it.

Version 3

In demo 3 above we don’t use a time field but a standard text field with no special settings applied.

Step 1:

Add a text field to your form
In the text field description box (or in a new html field if you prefer) add this:

<a onclick="getTime()" class="xsmall regular extra-color-1 regular-button">Get Current Time</a>

Note: Add / remove the classes as required.

Save the form.
Now go to the form Settings > Customise HTML > After Fields section and add this script:

<script>
   function addZero(i) {
     if (i < 10) {
       i = "0" + i;
     }
     return i;
   }
   
   function getTime() {
     var d = new Date();
     var h = d.getHours();
     var m = addZero(d.getMinutes());
     var s = d.getSeconds();
     var t = h + ":" + m + ":" + s;
     document.getElementById("field_qouk7").value = t;
   }
</script>

Replace qouk7 in 1 place with your text field key
Save the form

And that’s it.

This script can be really useful for capturing a users local time in your forms and works really well for anyone building an online timesheet or similar.

Enjoy.

Get Current Time – Formidable Forms