Working with Tabs and Accordions

Forms with many columns can become difficult to navigate when all information is displayed at once. Tabs and Accordions allow you to divide form content into logical sections, making larger forms easier to organize and use.

Instructions

Step 1: Add Tabs to the Form

1. Open Form Designer in your list.
2. In the Controls section on the left, locate Tabs.
3. Drag Tabs onto the form where you want the tabbed section to appear.

The Tabs control initially contains two tabs. You can add additional tabs and configure each section based on the information you want to display

Step 2: Create and Name the Tabs

For our Support Request form, we'll divide the information into three sections:

• Request Details — general information about the request;
• Assignment — information about who is responsible for the request;
• Resolution — information related to completing the request.

Select the Tabs control and rename the existing tabs:

1. Rename Tab 1 to Request Details.
2. Rename Tab 2 to Assignment.
3. Click Add new tab and name the new tab Resolution.

You can also drag the tabs in the settings panel to change their order or use the delete icon to remove tabs you no longer need.

Step 3: Organize Columns into Tabs

Each tab acts as a container for columns and controls. Drag the appropriate content into each section of the Tabs control.

For this example, organize the Support Request form as follows:

Select each tab and move the corresponding columns into it.

You can arrange columns within each tab just as you would elsewhere in Form Designer. Containers and other controls can also be placed inside a tab when you need a more advanced layout.

Once the columns have been moved, switch between the tabs in Form Designer to verify that each section contains the correct information.

Step 4: Customize the Tab Appearance

The appearance of tab headers can be customized directly from the Tabs control settings.

Select the Tabs control. You can configure the Font size and Font weight of the tab labels.

You can also customize three different tab states:

• Active — the tab currently selected;
• Inactive — tabs that are not currently selected;
• Hover — the appearance of a tab when the user points to it.

For each state, configure the Color, Background color, and Border as needed.

For example, you can give the active tab a more noticeable background or text style while keeping inactive tabs more neutral. This makes the currently selected section easier to identify.

Step 5: Add Tab Navigation Buttons

This option can be especially useful for longer forms where the tabs represent consecutive parts of a process.

Working with Accordions

An Accordion provides another way to organize form content into sections. Instead of displaying sections as tabs, Accordion sections are arranged vertically and can be expanded or collapsed.

We can use the same Support Request information to see how the form works with an Accordion layout.

Step 6: Add an Accordion

Return to Form Designer.

1. In the Controls section, locate Accordion.
2. Drag Accordion onto the form.
3. Create three sections:
• Request Details
• Assignment
• Resolution
4. Move the corresponding columns into each section.

As with Tabs, each Accordion section can contain columns as well as other Form Designer controls.

---

Step 7: Customize the Accordion Appearance

Select the Accordion control to customize how its section headers appear.

Use the available styling options to make the Accordion consistent with the rest of your form.

You can customize the appearance of the section headers for their available states, including text, background, and border settings.

Summary