Select Field Element
The Select Field Element adds a dropdown list to a Tirenoa Form. The visitor opens the list and picks an answer, for example a country, a product group or the department that should receive the request. The visitor can only choose from the answers you prepared, so the entries stay consistent and easy to sort.
A dropdown keeps long lists compact, so the form stays short even with dozens of choices. Switch on Multiselect and the field becomes an open list box in which the visitor can select several entries at once. All chosen entries are sent together as one answer.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Select Field Element
Open your form under Tirenoa > Forms and add the Select Field Element. Enter a Field Label and a Field Name in lowercase letters, digits, dashes or underscores; the name identifies the answer in the form entries and in the notification email. Decide on Multiselect, then add the entries under Options. Each option has a label and an optional value; without a value, the label itself is submitted. Tick the checkbox of an option to preselect it.
For a single-choice dropdown, Placeholder Text adds a first entry such as “Please choose” that cannot be selected, so the visitor has to make a real choice; it is not shown when Multiselect is on. Input Field Icon places an icon in front of the field, and Tooltip Text adds a question-mark icon with a hint next to the label. Colors, borders and the label position come from the form’s appearance settings.
Turn on Required Field when an answer is needed; the label gets an asterisk and Empty Input Notice sets the message shown when nothing is chosen. The selected value is stored in the form entries under the field’s label; several selected values are joined with a vertical bar. Use the field name in square brackets in the notification email, for example [department]. Autocomplete Tokens lets browsers fill the field from saved data, such as Country Name for a list of country names, and Conditional Logic on the Conditionals tab shows or hides the field based on other answers.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Field Label | Enter the label for the input field. This is how users will identify individual fields. |
| Field Name | Enter the field name. Please use only lowercase alphanumeric characters, dashes, and underscores. |
| Multiselect | Choose whether you want a multi select or not. |
| Required Field | Make a selection to ensure that this field is completed before allowing the user to submit the form. |
| Empty Input Notice | Enter text validation notice that should display if data input is empty. |
| Placeholder Text | The placeholder text to display as the initial selection. |
| Tooltip Text | The text to display as tooltip hint for the input. |
| Options | Add options for the input field. Use the checkbox to preselect a value. |
| Input Field Icon | Select an icon for the input field, click again to deselect. |
| Autocomplete Tokens | Select an autocomplete detail token. Select custom to add your own token combination. For more info and examples, you can check MDN Web Docs. |
| Autocomplete Custom Tokens | Enter your custom autocomplete tokens. For more info and examples, you can check MDN Web Docs. |
| Tab Index | Tab index for the form field. |
| CSS Class | Add a class for the form field. |
| CSS ID | Add an ID for the form field. |
Conditionals
| Heading | Description |
|---|---|
| Conditional Logic | Add conditional logic for the input field. |
Tips
- Combine Required Field with a Placeholder Text. Without a placeholder the first option is selected from the start, so the field always counts as answered.
- Multiselect is hard to use for many visitors, who do not know they must hold a key to pick several entries. For a handful of choices, a Checkbox Field is easier.
- Use option values for anything you process further, such as a short code per department, and keep the visible label readable.
- A multiselect list shows up to about five entries at once and scrolls after that.
- If you add no options, the field is not shown at all.
