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

      Corfix Form Builder: Using the Columns Component.

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

      This component is used to arrange other form components side-by-side in a columnar layout, helping to organize your form visually.

      Where to Find It

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

      • Display

      • Conditional

      1. Display Tab

      The Display tab controls the layout and general appearance of the Columns Component.

      • Label:

        • This is the title for your column section. While it's a required field, it often serves more as an identifier within the form builder rather than a prominently displayed label to the user.

        • Example: "Columns", "Two Column Layout", "Address Fields".

      • Column Properties:

        • This section allows you to define the width of each individual column you want to create. Corfix likely uses a 12-unit grid system (common in web design), where the sum of column widths should typically add up to 12 for a full row.

          • Width: The numerical width assigned to each column.

          • Add Column: Click this button to add another column to your layout.

      • Custom CSS Class:

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

      • Hide Label:

        • If checked, the label for the component will not be displayed on the form. This is often checked for layout components as their purpose is visual arrangement.

      • Modal Edit:

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

      2. Conditional Tab

      The Conditional tab allows you to set up rules for when this entire Columns Component (and all components within it) 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 "Two-Column Contact Info" section only displays when "Require Additional Contact" checkbox is checked.

      Preview Panel

      The Preview panel on the right side of the dialog box visually represents the column layout you are creating. It shows the horizontal division of space into columns, reflecting the "Width" settings you apply. Other components that you later drag and drop into these columns will then appear within this structure.

      Actions at the bottom of the dialog:

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

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

      • Remove: Deletes the Columns Component and all components placed within it from the form.

      Best Practices for Columns Component:

      • Use for Visual Organization: Use columns to group related fields side-by-side and make your forms shorter and easier to read.

      • Aim for 12-Unit Total Width: For a single full row, ensure the sum of your column "Widths" adds up to 12 (e.g., two columns of 6, three columns of 4).

      • Hide the Label: For columns, usually hide the component "Label" as its primary purpose is layout, not data input.

      • Keep Related Fields Together: Place logically connected fields (like first name and last name, or city and postal code) in adjacent columns.

      • Conditional Grouping: Use "Conditional" settings to show/hide entire sections of the form that are laid out in columns, making dynamic forms cleaner.