Textarea Field Element
The Textarea Field Element adds a multi-line text box to a Tirenoa Form. It is the place for free text: the message of a contact form, a description of a problem, a comment in a feedback form or any answer longer than one line.
You set how tall the box is when the page loads and can limit the text to a minimum and maximum number of characters. A minimum helps you get enough detail to answer a request; a maximum keeps messages to a size your team can read.
In this article: How To Use · Element Options · Tips · Related Elements
How To Use The Textarea Field Element
Open your form under Tirenoa > Forms and add the Textarea Field Element. Enter a Field Label, such as “Your message”, and a Field Name in lowercase letters, digits, dashes or underscores; the name identifies the text in the form entries and in the notification email. Use Placeholder Text for a short hint inside the empty box and leave Field Value empty unless you want a starting text. Turn on Required Field if a message is needed, and set the message for an empty box in Empty Input Notice.
Textarea Row Value sets the visible height in lines of text. Input Field Icon places an icon next to the box, and Tooltip Text adds a question-mark icon with a hint beside the label. Colors, borders and the label position come from the form’s appearance settings, so the box matches the other fields.
Minimum Required Characters and Maximum Allowed Characters limit the length; leave them at 0 for no limit. Readonly Field shows a text that cannot be changed but is still sent, while Disabled Field shows it as inactive and does not send it. The text is stored in the form entries under the field’s label, and [message] places the text of a field named message in the notification email. Autocomplete Tokens and Conditional Logic work as on the other form fields.
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. |
| Field Value | Enter a starting value for the element. Usually this should be empty and a placeholder used instead. |
| 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. |
| Readonly Field | Choose to set the field to read-only, which makes its content uneditable. Readonly fields will be submitted. |
| Disabled Field | Choose to disable the field, which makes its content uneditable. Disabled fields won’t be submitted. |
| Placeholder Text | The placeholder text to display as hint for the input type. If tooltip is enabled, the placeholder will be displayed as tooltip. |
| 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. |
| Textarea Row Value | Choose number of rows you want to have for this textarea field. |
| Minimum Required Characters | Controls the minimum number of characters that will be required for this input field. Leave at 0 to have no minimum. |
| Maximum Allowed Characters | Controls the maximum number of characters that will be allowed for this input field. Leave at 0 to have no maximum. |
| 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
- Four to six rows are enough for most contact forms. A very tall empty box can make a form look like more work than it is.
- Tell visitors about a character limit in the label or with Tooltip Text. The browser stops accepting input at the maximum without further explanation.
- Autocomplete rarely helps with free text; keep Autocomplete Tokens on Off unless the box holds a known value such as a street address.
- Always fill in Field Label. The placeholder disappears as soon as the visitor starts typing.
- On a readonly or disabled box without a Field Value, the Placeholder Text is used as its text.