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

      Corfix Form Builder: Using the Email Component.

      This article will summarize how to use the Email Component in Template Builder.

      This component is specifically designed for collecting email addresses and includes built-in email format validation.

      Where to Find It

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

      • Display

      • Data

      • Validation

      • Conditional

      1. Display Tab

      The Display tab controls how the Email Component appears to the user.

      • Label:

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

        • Example: "Email Address", "Contact Email", "User Email".

      • Label Position:

        • Determines where the label is displayed relative to the email 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: "john.doe@example.com".

      • Description:

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

        • Example: "Please enter your primary email address for communication."

      • 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 input field. (Less common for email fields).

      • Suffix:

        • Text that appears after the input field. (Less common for email fields).

      • Custom CSS Class:

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

      • Autocomplete:

        • Controls browser autocomplete behavior (e.g., 'on' or 'off'). For email, 'on' is usually helpful.

        • Default: 'on'.

      • Hide Label:

        • If checked, the label for the email field will not be displayed.

      • Allow Spellcheck:

        • If checked, enables spell-checking for the email field (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 email field.

      • Multiple Values:

        • If checked, allows the user to enter multiple email addresses for this field (e.g., a list of recipients).

      • Default Value:

        • The pre-filled email address that appears in the input field 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 a valid email format and meets specific length criteria.

      • Required:

        • If checked, the user must enter an email address in this field before submitting the form.

      • Minimum Length:

        • The minimum number of characters allowed in the email field.

      • Maximum Length:

        • The maximum number of characters allowed in the email field.

      4. Conditional Tab

      The Conditional tab allows you to set up rules for when this Email 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 a "Secondary Email" field only displays when a "Do you have a secondary email?" checkbox is checked.

      Preview Panel

      The Preview Panel on the right side of the dialog box shows you how the "Email" input field will visually appear on your form. As you adjust settings like the Label, Placeholder, or Prefix/Suffix, you'll see these changes reflected immediately.

      Actions at the bottom of the dialog:

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

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

      • Remove: Deletes the Email Component from the form.

      Best Practices for Email Component:

      • Clear Label: Use a straightforward label like "Email Address" or "Contact Email."

      • Provide a Placeholder Example: Use the "Placeholder" (e.g., "name@example.com") to show the expected format.

      • Make it Required for Communication: If an email is essential for follow-up or account creation, always check the "Required" box.

      • Enable Multiple if Needed: If users might need to provide more than one email (e.g., for notifications), check "Multiple Values."

      • Use Conditional Display: Only show the email field when it's logically relevant (e.g., show "Emergency Contact Email" if "Emergency Contact" is checked).