The Group element lets you organize related elements into a section of your form. A group can have a title, description, and border, and you can use conditional logic to show or hide its elements together.
Adding a group
Add a Group element to the form, then drag the elements you want to include into the group.
To configure the group, click its settings icon in the form builder.
Settings
Basic
Label
Sets the label used to identify the group in the form builder. To display a heading in the form, use the Title setting.
Title
Sets the title displayed at the top of the group. Choose the HTML heading tag using the selector beside the title.
Description
Sets description text displayed below the title at the top of the group.
Styles
Field size
Sets the padding and font size of fields within the group. Choose Inherit to use the setting from the parent group, page, or form. Individual fields or nested groups can override this setting.
Field width
Sets the width of fields within the group. Choose a preset size, Custom, or Inherit to use the setting from the parent group, page, or form. Individual fields or nested groups can override this setting.
Field custom width
If Field width is set to Custom, enter a custom width using any valid CSS width.
Group style
Choose Plain for no additional styling, or Bordered to add a border and padding around the elements within the group.
Border color
If Group style is set to Bordered, choose the border color.
Background color
If Group style is set to Bordered, choose the background color.
Custom CSS class
Add a custom CSS class to the group, or multiple classes separated by a space.
CSS styles
Add custom CSS styles to parts of the group by clicking Add a style, choosing the selector, and entering the CSS into the box.
Labels
Tooltip trigger
Sets the default tooltip trigger for fields within the group. Choose Field, Icon, or Inherit to use the setting from the parent group, page, or form. Individual fields or nested groups can override this setting.
Tooltip event
Sets the default event that displays tooltips within the group. Choose Hover, Click, or Inherit to use the setting from the parent group, page, or form. Individual fields or nested groups can override this setting.
Label position
Sets the default label position for fields within the group. Choose Above, Left, Inside, or Inherit to use the setting from the parent group, page, or form. Individual fields or nested groups can override this setting.
Label width
If Label position is set to Left, enter a custom label width using any valid CSS width.
Show label in email
If enabled, the group’s Label is displayed as a heading in the default notification email.
Show label in entry
If enabled, the group’s Label is displayed as a heading when viewing an entry.
Logic
Enable conditional logic
Enable or disable conditional logic for the group. This allows the group and its elements to be shown or hidden based on values entered elsewhere in the form.
Logic rules
Choose whether to show or hide the group when all or any of the rules match. Click Add logic rule, then choose the element, operator, and value for each rule.
Advanced
Unique ID
The unique element identifier is displayed here. You may need this for advanced usage.
Visibility
Sets the group and its elements to be visible to Everyone, Logged in users only, or Logged out users only. Choose Admin only to make them available only when viewing or editing entries.