Text Area component

What is the Text Area component?

Text Area is an Inquiry screen component that adds a text field to the screen. It allows users to enter and edit freeform text. You can set how the input data is updated to the fields table and define logic that governs when it appears.

textarea

A Text Area component is useful for collecting short, freeform text from users. For example, you could use a Text Area component to provide a place for a user to leave comments or feedback.

How do you add a Text Area component?

  1. Navigate to the Dashboard, and click on Inquiries > Templates.
  2. Find and click on the Inquiry template you want to edit, or Create a new template.
  3. Hover over a Screen and click the Edit button to view the Component Library.

component-edit

  1. In the left toolbar, click Component Library and search for ‘Text Area’.
  2. Drag and drop the Text Area component into your screen, and reposition it by dragging it around.
  3. Click on the Text Area component, and go to Properties in the right toolbar.
    1. (Optional) Add customized validations. Learn more about Validations below.
    2. (Optional) Add a customized label, placeholder and translations:
      1. Edit the text in the Label box. The Label is a text element displayed above the Text Area component to describe its purpose, such as “Leave a comment” or “Provide more information,” helping users understand what information to provide. You can also bold, italicize, and make other functional changes to the text there.
      2. Edit the text in the Placeholder box. The Placeholder displays temporary text inside the Text Area component, such as “Enter your comments” offering an example or guidance on the expected format until the user enters their own input. You can also bold, italicize, and make other functional changes to the text there.
      3. Add translations for the text by clicking Edit translations. You can Translate All or Translate individual languages, manually or automatically. If you don’t set translations, you’ll be prompted to do so upon Publishing the template.
  4. In the Fields toolbar tab, you can set up and customize the behavior of the Text Area component.
    1. Required: Choose whether the field is mandatory (Yes), optional (No), or based on conditions (Conditional). If you choose Conditional you will need to set a Logic rule, you can read more about Logic below.
    2. (Optional) Max length (char): This sets the maximum length of characters accepted for this input field. The default value is 1024 characters.
  5. (Optional) In the Logic toolbar tab, you can add rules that govern when the component appears, and when it does not. You can read more about Logic below.
  6. Close the step. You’ll have to Save and Publish the template to begin using it.

Validations

Validation rules can be set on a Text Area field to ensure that the entered data is a properly formatted and is a valid web address. This can prevent errors such as broken links or invalid inputs, and can ensure only usable and accurate Text is submitted.

The Error message can be edited to provide the user with more information on why the Text Area input is not valid. Translations for the error message can be added by clicking Edit translations. You can Translate All or Translate individual languages, manually or automatically. If you don’t set translations, you’ll be prompted to do so upon Publishing the template.

validations

Validation Rules

Validation rules consist of three main components:

  1. Field: The object that will have a condition linked to it.
  2. Condition: How the field is compared to the value (e.g., equals, does not equal).
  3. Value: The value to test against.

Creating Validation Rules

  • AND Statements: Combine multiple conditions that must all be true for the rule to pass. Add these using the "Add" button.
  • OR Groups: Combine conditions where only one needs to be true for the rule to pass. Create these by clicking "Add OR Group".

How to Use Validation Rules

  1. Click on the Text Area component, and go to Logic in the right toolbar.
    1. Create a validation rule by filling in the three boxes following When, which correspond to an object, its condition, and its value being assessed, respectively. When that validation rule passes, the component update is applied.
    2. (Optional) Add additional validation rules by clicking either + Add (if you want to add 'AND' rules, where all must be passed to continue) or + Or (if you want to add 'OR' rules, where one must be passed to continue). You can also nest a group of OR statements within an AND statement by clicking + Add Group.
    3. (Optional) To edit the validation directly, you can open the code editor.
  2. Create a validation rule by filling in the three boxes following When, which correspond to an object, its condition, and its value being assessed, respectively. When that validation rule passes, the component update is applied.
  3. (Optional) Add additional validation rules by clicking either + Add (if you want to add 'AND' rules, where all must be passed to continue) or + Or (if you want to add 'OR' rules, where one must be passed to continue). You can also nest a group of OR statements within an AND statement by clicking + Add Group.
  4. (Optional) To edit the validation directly, you can open the code editor.

Translations

Persona can automatically translate new text into other languages in the component’s Properties tab. You can also customize the translation for any particular language.

translations

Logic

Persona provides you with the ability to add logic to a Text Area component. For example, a component may only become visible to a user if certain conditions are met. On the Logic tool bar tab, there are two options for logic rules:

  • On screen load: Logic rules are evaluated only when the screen loads. They can reference any field configured on the template.
  • On screen update: Logic rules are evaluated in real time. They can only reference inputs on the current screen.

logic

For form components a field can be labeled as required under specific conditions.

  • Require field: Logic rules are evaluated in real time referencing inputs on the current screen. They can only reference inputs on the current screen.

logicrequired

Logic Rules

Logic rules consist of three main components:

  1. Field: The object that will have a condition linked to it.
  2. Condition: How the field is compared to the value (e.g., equals, does not equal).
  3. Value: The value to test against.

Creating Logic Rules

  • AND Statements: Combine multiple conditions that must all be true for the rule to pass. Add these using the "Add" button.
  • OR Groups: Combine conditions where only one needs to be true for the rule to pass. Create these by clicking "Add OR Group".

How to Use Logic Rules

  1. Click on the Text Area component, and go to Logic in the right toolbar.
    1. Choose either “On screen load” or “On screen update” and click Add.
    2. Choose what Component Update to apply. This determines what happens to the component when the logical rules are met.
    3. Create a logical rule by filling in the three boxes following When, which correspond to an object, its condition, and its value being assessed, respectively. When that logical rule passes, the component update is applied.
    4. (Optional) Add additional logical rules by clicking either + Add (if you want to add 'AND' rules, where all must be passed to continue) or + Or (if you want to add 'OR' rules, where one must be passed to continue). You can also nest a group of OR statements within an AND statement by clicking + Add Group.
    5. (Optional) To edit the logic directly, you can open the code editor.
  2. Choose either “On screen load” or “On screen update” and click Add.
  3. Choose what Component Update to apply. This determines what happens to the component when the logical rules are met.
  4. Create a logical rule by filling in the three boxes following When, which correspond to an object, its condition, and its value being assessed, respectively. When that logical rule passes, the component update is applied.
  5. (Optional) Add additional logical rules by clicking either + Add (if you want to add 'AND' rules, where all must be passed to continue) or + Or (if you want to add 'OR' rules, where one must be passed to continue). You can also nest a group of OR statements within an AND statement by clicking + Add Group.
  6. (Optional) To edit the logic directly, you can open the code editor.

Plans Explained

Text Area component by plan

Startup Program Essential Plan Growth Plan Enterprise Plan
Text Area component Available Available Available Available
Translations for Text Area component Limited Limited Available Available
Logic for Text Area component Limited Limited Limited Available

Learn more about pricing and plans.

Learn more

Learn more about Inquiries.