Step 1: The Default - A Single Column

When you first create fields, they are arranged in a single column, each taking up the full width of the form. This is the simplest layout and works well for very short forms.

Step 2: Introducing Columns with Field Width

To make better use of screen space, you can place fields side-by-side. Edit a field and change its Field Width in Form setting from "100%" to "50%" or "33%". The system will automatically arrange the fields in rows.

• Two fields with 50% width will appear next to each other.
• Three fields with 33% width will form a three-column row.
• The system automatically wraps to a new row when the total width exceeds 100%.

Step 3: Creating Structure with Section Headers

As your form grows, you need to group related fields. The SECTION_HEADER field type is perfect for this. When you add a Section Header, it creates a distinct visual separation, grouping all subsequent fields into a card until the next Section Header is encountered.

You can even make these sections collapsible or give them background colors in the Section Header's options!

Step 4: Adding Explanations with Help Text

Sometimes a field's label isn't enough. The HELP_TEXT field type lets you add instructional text anywhere in your form. This is great for explaining complex fields or providing important information to the user.

Step 5: Advanced Layouts with HTML in Help Text

The HELP_TEXT field is incredibly versatile because it supports HTML. You can use it to add more than just text. A simple <hr> tag can create a horizontal line to separate fields within a card.

For more advanced use cases, you can add any Bootstrap 5 component, like an alert box for important warnings.

Step 6: The Ultimate Organizer - Tabs

For very complex forms, even cards can become unwieldy. The most powerful feature of the SECTION_HEADER is its ability to create tabs. In the options for a Section Header, simply enter a name in the Tab Group field (e.g., "Master Data").

All subsequent Section Headers with the same Tab Group name will automatically become tabs in a single, clean tabbed interface. All fields following a tabbed header will appear within that tab's content area.