How to Add Time Field to a Form

September 1, 2022

The Time field allows your users to enter a valid time format in the form. It will display the time based on timezone and time format in your account settings.

Note

The new Default Theme requires users to enter the time. It is optimized to display a numeric keyboard on mobile devices. However, the other Form Themes will display a dropdown selector.

Adding the Time Field

The Time field is under the Basic Elements of the Form Builder. Click or drag and drop it to add.

jotform-elements-time

Setting up the Time Field Properties

Clicking the Cogwheel icon on the right side of the Time field opens its properties. There, you’ll find a few tabs.

General

In the General tab, you will find the following options:

  • Question Text — This will be the label of the time field.
  • Label Alignment — You can align the label to the left, right, and top. You also have the option to apply this alignment to all other fields.
  • Required — Toggle this to Yes to make the time field required.
  • Sublabels — Change the sublabels or remove them.
  • Duplicate Field — Click the Duplicate button to duplicate the field with all its settings.
time-field-general-tab

Options

In the Options tab, you can set the following:

  • Minute Stepping — This is the time difference between minute options. Note: You’ll only see this if you’ve applied the old default theme.
  • Time Format — You can select a 24-hour or AM/PM format.
  • Limit Time — You can restrict users to select hours from AM or PM periods.
  • Default Time — You can select to display the Current time or set a Custom time. The Current time option fills the form with the time the user opens the form. Enabling or Disabling the form based on time is one use-case for selecting the Current time. For more information, visit: Enable or Disable a Form Based on Time Using Conditions.
time-field-options-tab

Range

The options from the Range tab are all disabled by default. You’ll have to toggle the first option to display the others.

  • Time Range — Enabling this option will display two time fields to indicate a range.
  • Duration Indicator — Toggle this to show the difference between the selected times from the range.
  • Until — This is the separator text between the time range.
time-field-range-tab

Advanced

The Advanced tab is where you can set the following:

  • Hover Text — Use this to display information when you hover your mouse to the field.
  • Read Only — This makes the field non-editable when you view the form.
  • Shrink — This shrink down the field. It’s useful for aligning two elements in one row.
  • Hide Field — Toggle this to hide the field from your form.
  • Field Details — This is where you’ll find the Unique Name and IDs of the field. For more information, visit: How to Find Field IDs and Unique Names.
Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Johansson
  • AZDBAdesze
  • rensieb76
  • tonycrowther
  • iaraoz16
  • PJ_
  • gmotta11
  • Jeanette
  • hkudaish
  • gori-mathew
  • Welvin
  • batesmp
  • TitusN
  • darkcheck
  • caweldon
  • Vogeld