Template Builder Guides
      Back to home
      1. Corfix Guide
      2. Template Builder Tutorials
      3. Template Builder Guides

      Corfix Form Builder: Using the Text Area Component

      This article will summarize how to use the Text Area in Template Builder.

      The Text Area Component allows Corfix clients to collect open-ended text input in forms. The Text Area is used for collecting longer, multi-line text input from users.

      Where to Find It

      In your Corfix Form Builder, click on a Text Area Component to access the configuration panel. You’ll see four tabs:

      • Display

      • Data

      • Validation

      • Conditional

      Each tab controls different aspects of the field’s behaviour.

      1. Display Tab

      The Display tab controls how the Text Area appears to the user.

      • Label:

        • This is the visible name of your text area field that users will see. It is a required field.

        • Example: "Comments", "Detailed Description", "Meeting Minutes".

      • Label Position:

        • Determines where the label is displayed relative to the text input box (e.g., Top, Left, Right, Bottom).

        • Default: Top.

      • Placeholder:

        • Text that appears inside the input field before the user types anything. It's a hint to the user about what to enter.

        • Example: "Enter your detailed feedback here."

      • Description:

        • Provides additional explanatory text for the field, typically displayed below the input box.

        • Example: "Please provide as much detail as possible about the issue."

      • Rows:

        • Specifies the initial visible height of the text area in lines. Users can usually resize it if "Auto Expand" is not enabled.

        • Default: 3.

      • Tooltip:

        • Text that appears when the user hovers their mouse over the field. Useful for providing quick help or context.

      • Prefix:

        • Text that appears before the text area.

      • Suffix:

        • Text that appears after the text area.

      • Auto Expand:

        • If checked, the text area will automatically increase in height as the user types more content, eliminating the need for a scrollbar.

      • Custom CSS Class:

        • Allows advanced users to apply custom styling to the text area using CSS classes.

      • Autocomplete:

        • Controls browser autocomplete behavior (e.g., 'on' or 'off').

        • Default: 'on'.

      • Hide Label:

        • If checked, the label for the text area will not be displayed.

      • Allow Spellcheck:

        • If checked, enables spell-checking for the text area (browser-dependent).

      • Modal Edit:

        • (Details not fully visible in screenshot, but typically relates to editing in a pop-up modal window).

      • Reportable:

        • If checked, the data from this field will be included in reports.

      2. Data Tab

      The Data tab manages the underlying data properties of the text area field.

      • Multiple Values:

        • If checked, allows the user to enter multiple separate long text entries for this field.

      • Default Value:

        • The pre-filled text that appears in the text area when the form loads. Users can override this value.

      3. Validation Tab

      The Validation tab defines rules to ensure the data entered by the user is valid and meets specific criteria for the long text input.

      • Required:

        • If checked, the user must enter some text in this field before submitting the form.

      • Minimum Length:

        • The minimum number of characters allowed in the text area.

      • Maximum Length:

        • The maximum number of characters allowed in the text area.

      • Minimum Word Length:

        • The minimum number of characters a word must have within the text area.

      • Maximum Word Length:

        • The maximum number of characters a word can have within the text area.

      4. Conditional Tab

      The Conditional tab allows you to set up rules for when this Text Area Component should be displayed or hidden based on the values of other components in the form.

      • Simple:

        • This is typically a toggle or a dropdown to select between simple and advanced conditional logic.

      • This component should Display:

        • Choose whether the component should "Show" or "Hide" (implied options) based on the condition.

      • When the form component:

        • Select another component in your form whose value will trigger the condition.

      • Has the value:

        • Specify the exact value that the selected form component must have for the condition to be met.

        Example: You could set up a rule so that an "Additional Notes" text area only displays when a "Needs Further Explanation?" checkbox is checked (i.e., has the value "true").

      Preview Panel

      The Preview area on the right side of the dialog box shows you how the "Text Area" will visually appear on your form. As you adjust settings like the Label, Placeholder, or the number of Rows, you'll see these changes reflected in real-time.

      Actions at the bottom of the dialog:

      • Save: Saves all changes made to the Text Area Component's settings.

      • Cancel: Discards any unsaved changes and closes the dialog.

      • Remove: Deletes the Text Area Component from the form.

      Best Practices for Text Area Component:

      • Descriptive Label: Always use a clear label for what type of long text is expected (e.g., "Detailed Notes," "Description of Work").

      • Set Initial Rows: Adjust "Rows" to give users enough visible space for their input without making the form too long initially. 3-5 rows is often a good start.

      • Consider Auto Expand: For fields where input length varies greatly, checking "Auto Expand" provides a better user experience by preventing scrollbars.

      • Use Validation for Quality: Set "Required" if the text is essential, and consider "Minimum Length" if a substantial amount of detail is needed.

      • Conditional Display: Only show text areas when necessary (e.g., "Problem Description" only appears if "Problem Found" is checked).