Time Field Element

Last Update: March 14, 2024

The Time Field Element allows a user to select a specific time in hours and minutes. You can see an example of this Element in the Reservation Prebuilt Form.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Time Field Element

The Time Field Element allows you to place a time selector into your forms. To start, just add the element into your desired column in a Form Layout.

The main unique options to look at in this Element are the Custom Picker, and the Clock Type, Otherwise, configure the Element as any other Form Element.

Read below for a description of all element options.

Element Options

Location: The edit screen within each Element. You access the Form Builder Elements when adding an Element while editing a Form in the Avada Form Builder (Forms > Form Builder, from the Avada Dashboard).

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Field LabelEnter the label for the input field. This is how users will identify individual fields.
Field NameEnter the field name. Please use only lowercase alphanumeric characters, dashes, and underscores.
Required FieldMake a selection to ensure that this field is completed before allowing the user to submit the form.
Empty Input NoticeEnter text validation notice that should display if data input is empty.
Placeholder TextThe placeholder text to display as hint for the input type. If tooltip is enabled, the placeholder will be displayed as tooltip.
Tooltip TextThe text to display as tooltip hint for the input.
Custom PickerChoose to enable a lightweight custom picker on mobile only, mobile and desktop or set to never to use browser native.
Clock TypeChoose between 12 hour and 24 hour clock type. Note, will only work for custom picker type.
Input Field IconSelect an icon for the input field, click again to deselect.
Tab IndexTab index for the form field.
CSS ClassAdd a class for the form field.
CSS IDAdd an ID for the form field.

Conditionals

HeadingDescription
Conditional LogicAdd conditional logic for the input field.

In this article