Use columns, sections and pages to build a form with a layout that meets your team's needs. Each offer a different way to organize and customize your form.
Sections
A section is a visually distinct container for your form’s columns. Sections fill the full width of the form and expand vertically to accommodate the height of the columns they contain. When you create a new form, your form canvas will have one section and column.
Adding and deleting sections
-
To add a section, select Add section
.
- Each section comes equipped with a side panel of section controls with options to add columns, open section settings, and delete sections. To remove a section, select Delete section in the section controls. If you have only one column in a section, you will not be able to delete the column.
Customizing sections
Select Edit section heading to add a heading to a section.
Section headings can also be adjusted in the section settings menu. Section headings are optional and are visible to your form users.
Adding a heading also enables users to expand and collapse a section. When you have two or more sections on your form, each section can be adjusted to load as expanded or collapsed for your form users. For example, if you have form fields that only need to be viewed and edited by a small number of users, you can choose to collapse the section containing those fields. End users can expand and collapse the sections as needed.
Use the Move section up and Move section down arrows in your section settings to reorder sections.
These changes take effect immediately on the canvas. To add a divider line between a section's columns, open the section settings and select Show column dividers. Column dividers are visible to your form users and are applied only to the sections you choose. If you add color to a column, the dividers won’t display on either side of the column with color.
Adding pinned sections
Add a pinned section when displaying your pages as tabs. Pinned sections stay at the top of the form above the page navigation tabs. Pinned sections are visible on every tab of the form.
To add a pinned section to your form:
- Set your pages to display as tabs
- Select Add pinned section
Note: Pinning is the only way you can get tabs to appear under a section.
Columns
Form elements are added to a form in columns. Form elements are stacked vertically in each column and both the column and the section that contains the column will automatically expand vertically to accommodate the height of stacked form elements.
Adding and deleting columns
- Select Add column
to add a column to a form. You can also drag a form element into empty space within a section to create a column.
- Each section can have up to six columns unless the width has been adjusted. If your columns are wider than the default width, the number of columns you can add to a section will decrease.
- To remove a column, open the Column settings and select Delete column.
Customizing columns
Add dividers between your columns by turning on Show column dividers in the column's Section settings. These dividers will be visible to your end users. Column dividers will not display if a color is added to a column.
Add a heading to each of your columns in the column settings. Headings are optional and will be visible to your form users.
Add color to column backgrounds to distinguish columns from one another and draw users attention to important areas of the form. To add a background color to a column:
- Open Column settings.
- Turn on Background color.
- Select a color from the color palate or add a hex code in the field provided. Hex codes will need to include a # at the beginning of the number, for example, #ffecb3. Hex codes are not case specific.
Learn more about making accessibility friendly color choices for your form in the W3C recommendations for accessible color usage.
Resizing columns
Drag the column border to resize a column to your desired width. Layout guidelines will appear as you drag. The column will snap to the closest layout guideline when you deselect it. Columns must span at least two layout guidelines.
- Form elements set to auto width in each column will automatically adjust when columns are resized.
- Fixed width elements will remain at their set pixel width except when the column is resized to be narrower than the form element’s set width. If that happens, fixed width form elements will shrink to fit within the column.
- Grouped elements will wrap to a new line if a column is too narrow to display them in one row.
Pages
You can organize your form elements, columns, and sections onto pages and display them to your end users one step at a time. For example, you can create a form that separates property overview information, such as square footage and year of construction, from details like date and time of recent showings.
Adding and deleting pages
Scroll down to the last section on your form builder canvas to find Add page . On a form with two or more pages, a tab will appear above each page on the canvas with an editable name, page settings, and a delete page option. You can insert new pages between existing pages by using the Add page option beneath each page.
Adding two or more pages to your form will also activate the form navigation at the top of the page. Click the page tab to jump between pages or scroll down to the page tab you want. Pages can collapse and expand on the canvas to make it easier to build and edit complex forms.
You can delete pages using Delete page in the page tabs. When all but one of the pages are deleted, the form navigation and page tabs will disappear.
Customizing pages with navigation settings
Customize pages by clicking the form navigation settings icon on any page tab. You can:
- Display pages as tabs or steps.
- Edit the page names.
- Change the page tab color. Choose one of the colors from the palate or enter your own color hex code in the space provided to find your color. Hex codes need a # at the beginning of the number, like this: #ffecb3. Hex codes are not case specific.
- Reorder pages using the arrows next to each page.
Displaying pages as tabs
If you set form forms to display as tabs, form users will click each tab to navigate through the form.
Displaying pages as steps
If pages are displayed as steps, form users will use Next and Back to navigate the pages of the form.
Always use tabs when viewing records
Select the Always use tabs when viewing records option to display pages as tabs when viewing records even when the pages are set to display as steps when users are adding and editing records. Viewing pages as tabs makes it easier to go back and forth between pages while viewing data saved with your form.