Number Element
The Number Element is a form field that accepts only numbers, such as a quantity, the number of guests or an order amount. It is added inside a Tirenoa Form (Tirenoa > Forms), and you decide the lowest and highest number a visitor may enter.
Browsers show small up and down arrows on computers and a number keyboard on phones, and they refuse the form when the number is outside the range you allow. That keeps answers clean before they reach the form entries and the notification email.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Number Element
Add the Number Element to your form and enter the Field Label and the Field Name (lowercase letters, numbers, dashes and underscores only). New fields start with a Min Value of 0 and a Max Value of 100; change them to fit your question or clear them to allow any number.
Set Required Field to Yes with an Empty Input Notice if the number must be given, and use Invalid Input Notice to replace the browser’s message when the number is out of range. Placeholder Text, Tooltip Text and Input Field Icon add hints and an icon inside the field.
The number is saved under the field label in the entries and the notification email. Conditional Logic on the Conditionals tab can show the field only when another answer calls for it, for example a quantity after a product has been chosen.
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. |
| Min Value | Minimum allowed value. |
| Max Value | Maximum allowed value. |
| 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. |
| Invalid Input Notice | Enter validation notice that should display if data input is invalid. |
| Placeholder Text | The placeholder text to display as hint for the input type. |
| Tooltip Text | The text to display as tooltip hint for the input. |
| 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
- The field accepts whole numbers only; the browser rejects decimals such as 2.5. Use a Text Field Element for prices, measurements or anything with decimals.
- Min Value and Max Value must be numbers. Other text is ignored.
- Mention the allowed range in the label or placeholder, for example
1-20, so visitors know it before they get an error. - Do not use a Number field for phone numbers or postal codes; the field rejects spaces, plus signs and dashes. Use the Phone Number Field or a Text Field instead.