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

      Corfix Form Builder: Using the Phone Number Component

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

      This component is specifically designed for collecting phone numbers and often includes automatic formatting.

      Where to Find It

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

      • Display

      • Data

      • Validation

      • Conditional

      1. Display Tab

      The Display tab controls how the Phone Number Component appears to the user.

      • Label:

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

        • Example: "Phone Number", "Contact Phone", "Mobile".

      • Label Position:

        • Determines where the label is displayed relative to the phone number 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: "(123) 456-7890".

      • Description:

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

        • Example: "Please enter your best contact number."

      • 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 (e.g., a country code that's always the same).

      • Suffix:

        • Text that appears after the input field (less common for phone numbers).

      • 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 phone numbers, 'on' is usually helpful.

        • Default: 'on'.

      • Hide Label:

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

      • Allow Spellcheck:

        • If checked, enables spell-checking for the phone number field (browser-dependent). (Note: This is often less relevant for structured number inputs but may apply if the field allows some free-form text).

      • 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 phone number field.

      • Multiple Values:

        • If checked, allows the user to enter multiple phone numbers for this field (e.g., a list of contact numbers).

      • Default Value:

        • The pre-filled phone number 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 meets specific requirements.

      • Required:

        • If checked, the user must enter a phone number in this field before submitting the form.

      4. Conditional Tab

      The Conditional tab allows you to set up rules for when this Phone Number 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 Phone Number" field only displays when a "Provide secondary contact?" checkbox is checked.

      Preview Window

      The Preview area on the right side of the dialog box shows you how the "Phone Number" input field will visually appear on your form. Notice the automatic formatting (e.g., (___) ___-____), which indicates it helps users enter numbers in a standard format.

      Actions at the bottom of the dialog:

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

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

      • Remove: Deletes the Phone Number Component from the form.

      Best Practices for Phone Number Component:

      • Clear Label: Use a straightforward label like "Phone Number" or "Mobile Phone" so users know exactly what's expected.

      • Consider "Required": Make the phone number field "Required" if it's essential for contact or verification.

      • Allow Multiple if Needed: If users might need to provide more than one number (e.g., home and mobile), check "Multiple Values."

      • Use Placeholder for Format: Even with automatic formatting, a placeholder like "(555) 123-4567" can clearly show the expected input style.

      • Conditional Display: Hide phone number fields that are not immediately necessary, making the form cleaner (e.g., show "Alternate Contact Phone" only if the user indicates they have one).