Form layout
Introduction
This section explains how to implement advanced screen layouts for forms.
Functionality
Grid System
The platform's front-end uses the Tailwind CSS framework, allowing us to leverage its grid system for fieldset layout.
Grid for Fieldsets
The various fields of your advanced form can be divided into multiple fieldsets.
This separation allows grouping them by categories (general information, cost, dates, options, etc.) to improve screen readability.
Once the appropriate field distribution and fieldset naming are defined, we can arrange them in different ways based on the most suitable ergonomics:
- A simple case with 2 to 3 fieldsets split into vertical columns to optimize space and keep them visible side by side.
- Another variant with 2 to 3 fieldsets split across multiple horizontal rows if they contain many fields, providing a phased flow.
- For advanced cases with more fieldsets, vertical and horizontal displays can be combined for a customized layout.
Technical Tool for Fieldset Layout
Fieldset Rendering Options
- Form fieldsets have a visible title by default, but it can be removed for a more compact display.
- Conversely, if you want to provide more details, you can include a subtitle to guide users on how to fill out the fields.
- If the information required to explain the fieldset's input process is more extensive, we recommend using the documentation link option, which redirects users to a dedicated documentation page via a button.
Grid for Fields
The fields within fieldsets also follow the grid system.
By default, a field occupies the entire row it is placed in, but this can easily be adjusted by specifying a column count.
This allows you to achieve layouts ranging from 2 to 12 fields per row.
Title, Subtitle, and Divider
In addition to input fields within fieldsets, we provide additional components to structure the hierarchy within a fieldset, namely:
The Title Component
- This allows you to display a title before a group of fields within a fieldset.
- Like the fieldset itself, the title can have a subtitle for additional details.
- You can also enter a color to highlight them
For example, you could configure a Prospect fieldset containing field groupings separated by the titles Primary Prospect and Secondary Prospect, each with their respective fields (First Name, Last Name, Phone, etc.).
The Divider Component
- This component adds a visual separation line between field groups.
- It is recommended when certain data within a fieldset can be further compartmentalized, for instance:
- An Email Configuration fieldset with SMTP fields on one side and API fields on the other.
Tab Management
For advanced screens with numerous elements or when multiple field categories do not belong in the same place, we can split the form into multiple tabs.
For example, if a database model has several collections of elements, each with multiple fields, it makes sense to group them into separate tabs to enhance user focus during input.
Another use for tabs is displaying visualization data.
For instance, directly tracking payments on a prospect's edit page allows you to adjust their email address on the spot to resend an invoice to the correct address.
Header and Footer
Like all platform pages, the form screen includes header and footer sections for adding extra information to facilitate user input, such as:
- Progress indicators in the header.
- Easily accessible documentation in the footer.
Overrides
This section details the override capabilities for advanced forms.
Fieldset Overrides
When the standard grid layout for fields in a fieldset is unsuitable, we can completely override the fieldset to include a custom component that better meets your needs.
Examples:
- A weekly scheduling tool for sales representatives.
- An advanced cost estimation calculator.
- A rich text editor.
Field Overrides
Our platform provides a variety of ready-to-use input components, but you can add new ones tailored to your project.
Our custom approach extends down to the smallest unit of a simple input field, allowing us to provide a user experience tailored to your needs.
This level of customization also includes validation rules surrounding your new components.
This approach allows us to leverage our work, enabling the reuse of these components in other interfaces within the same project.