This article will summarize how to use the Well Component in Template Builder.
A Well Component is primarily a layout element used to visually offset or contain other form components within a distinct, often recessed or bordered, area.Where to Find It
In your Corfix Form Builder, click on a Well Component to access the configuration panel. You’ll see four tabs:
-
Display
-
Conditional
1. Display Tab
The Display tab controls the appearance and identification of the Well Component.
-
Label:
-
This is the title for the component within the form builder. While it's a required field, it often serves more as an identifier for you as the form designer rather than a prominent label visible to the end-user, especially if you "Hide Label."
-
Example: "Well Component", "Customer Info Box".
-
-
Custom CSS Class:
-
Allows advanced users to apply custom styling to the component using CSS classes, providing more control over its visual appearance (e.g., adding a border, background color, padding).
-
-
Hide Label:
-
If checked, the main label for the component will not be displayed on the form. This is commonly checked for layout components like "Well" as their purpose is visual grouping, not direct data input.
-
-
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 Well Component (and all components placed 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 "Special Instructions" well (containing a text area) only displays when a "Are special instructions needed?" checkbox is checked.
-
Preview Window
The Preview area on the right side of the dialog box shows you how the "Well" will visually appear on your form. It typically displays a box or a slightly shaded area, indicating a contained region where you can place other form fields. This helps you visualize how content will be visually separated.
Actions at the bottom of the dialog:
-
Save: Saves all changes made to the Well Component's settings.
-
Cancel: Discards any unsaved changes and closes the dialog.
-
Remove: Deletes the Well Component and all components placed within it from the form.
Best Practices for Well Component:
-
Visual Separation: Use a "Well" to clearly separate distinct sections of your form, making it easier for users to process information.
-
Group Related Fields: Place a logical group of fields inside a Well to enhance organization, similar to a Panel or Grouping Component but often with a simpler, less prominent visual style.
-
Use Custom CSS for Styling: Since the Well component is a basic container, leverage "Custom CSS Class" to define its appearance (e.g., subtle background shade, light border) to match your form's design.
-
Hide the Label: Typically, the Well's primary "Label" is for internal organization; hide it from the user interface using the "Hide Label" checkbox.
-
Conditional Grouping: Employ conditional logic to show/hide entire sections contained within a Well based on user input, streamlining the form experience.