Section Headings are typically used to add a title to a group of fields. They may also be used to customize your form layout or conditionally hide/show groups of fields. Sections may be collapsible or repeatable. The repeatable option allows users to add a group of fields any number of times.

Standard Field Options

A Section Heading field has the following standard options. Click Advanced in the field options to see the rest.

• Field Label
• Collapsible
• CSS Layout Classes
• Field Description
• Visibility
• Label Position
• Field Key
• Conditional logic

A Section's Label Position offers Default, Top, None, Hidden (but leave the space), and Center. To place labels to the left, right, or inline, set the Label Position on the fields inside the Section.

Field-specific options

Collapsible

To let your section or repeater slide open and closed, check the Collapsible box. This box is unchecked by default. A collapsible section starts closed on the form until the visitor clicks its heading.

Learn more about collapsible sections.

Display Section Heading

Display a Section Heading's label in a form's confirmation message, email, or View. You can find the section heading ID in your form builder.

Shortcode options

• Display label: Display the section heading field label.

  [x show=field_label]

  Replace x with the ID or key of the Section Heading field.

Section styling

Customize the style of your Section Headings in the Visual Form Styler. Go to Formidable → Styles. The style editor opens on your default style. To edit a different style, click the back arrow next to the style name. Then select that style and click Edit style. Next, click Show advanced settings at the bottom of the style settings.

Open Section Fields. These settings also apply to repeatable and collapsible headings.

Create a section

1. Click on the Section field.
   

   

2. Drag and drop the fields that you want into the section.
   

   

3. Click Update to save your changes. On a new form, this button is Save.

Click the header of a Section to select the whole Section. To work on several sections or fields at once, select one of them. Then hold Shift and click the header of a Section to select it and everything between it and your first selection. To add only that Section, hold Ctrl (Cmd on a Mac) instead. The options for the selected items, such as Merge into row and delete, appear at the bottom of the builder.

Conditionally hide/show section

Conditionally hide or show sections of your form by adding conditional logic to a Section. When you add conditional logic to a Section Heading, the conditional logic will apply to all fields in that section.

1. In the form builder, click the header of the Section to open its field options.
2. Open Conditional Logic and toggle on Enable Conditional Logic.
3. Set the rule that shows or hides the Section.
   

   

4. Click Update to save your changes.

This feature is a great time-saver because you only need to add conditional logic to the Section Heading and not to every field in the section. If you do not want the Section Heading to be visible in your form, set the Label Position to hidden or none.

Form layout

Use Sections to design the layout of your form. When you add a CSS layout class to a Section field, the class will apply to all fields in that section. You can also add styling to individual fields in the Section; just insert the class into the field's 'CSS layout classes' box.

Section Headings provide a faster and easier way of putting your form into columns. If you want a two column form, for example, you only need to add CSS layout classes to two sections, rather than adding a class to every field in the column.

If you want to use a Section for styling purposes, but you do not want the Section Heading text to be visible in your form, set the 'Label Position' to hidden or none.

Related developer hooks

• Always open sections with the frm_section_is_open hook.
• Open a target field with the frm_section_is_open hook.
• Open all sections in a target form with the frm_section_is_open hook.