Skip to main content

Layout Components

Learn more about Layout components

Layout components allow you to control the arrangement and placement of fields on a form. They also let you add static content like logos, headers, or contextual text using HTML or a WYSIWYG editor. Below, you can find details for each Layout Component, including settings, JSON code, and field examples.

HTML Element​

The HTML Element component allows you to insert a single HTML element into a form. It’s useful for quickly adding and configuring custom HTML. To ensure security, all unsafe HTML—such as script, embed, style ,img,div tags, and event attributes like onmouseover or onload—is removed before rendering.

HTML Tag: The name of the HTML tag to display.

CSS Class: The CSS class to add to the HTML Element. You may specify multiple classes by separating them with single spaces.

Attributes: Attributes and their values to add to the HTML Element. This is commonly used to add href attributes to a tags, or src attributes to img tags.

Content: The text content of the HTML Element. While adding more child HTML tags here will properly display them, it is recommended you use the Content component to easily write and preview more complex HTML.

Refresh on Change: Makes the HTML Element re-renders whenever any value in the form changes. It might be useful when you want the HTML Element to display dynamic data of the other components after they are filled in with values during the form filling. Simply enter data.componentApiKey into the HTML Element and enable this setting.

Content​

The Content component lets you add static content to a form, such as instructions, headers, or media. It’s ideal for providing display-only information, like guidance at the top of a form. Content added here is not submitted to the server, and a built-in WYSIWYG editor allows you to format it easily.

Heading: Choose a Heading 1-3 or Paragraph

Font Family: Select your font style preference

Font Size: Change the font size from large to small

Font Emphasis: Add bold or italic emphasis to the content

Link: Add a hyperlink to the form

Indent: Increase or decrease the indent of the text

Insert Media: Add an image from your local machine and or add an online video via URL

Align: Align the text Left, Center, or Right

Columns​

The Columns component allows you to group other components into configurable columns. Use it to display multiple fields inline, save vertical space, and ensure the layout automatically collapses for mobile devices.

Column Properties: Configured the number of available columns. Once set, components can be added to the columns by dragging and dropping a component into the column drop zone.

Auto Adjust Columns: If all the nested components inside one of the columns are hidden, all the other columns' positions will be adjusted.

Field Set​

Field Sets let you group multiple fields within a form, organizing related fields under a common heading or section. They improve the visual and logical structure of complex forms. Note that Field Sets are for display purposes only and are not submitted to the API.

Legend: The Legend is the title that is displayed for the Field Set

Panel​

Panels allow you to group and organize form components into collapsible or expandable sections. By visually separating different categories of information, panels make complex forms easier to navigate. They can include a title and be configured to open or close, helping reduce clutter and improve the user experience.

Theme: The theming of the Panel. Select one of the options to have the class added to the wrapper div, changing the color of the panel header.

Collapsible: Turn the Panel into a collapsible Panel, allowing users to open and close the panel section.

Initially Collapsed: The Panel will be collapsed on form load. Applied only when the Collapsible setting is enabled.

Table​

The Table component allows you to arrange and present form fields in a table-like layout. This component is particularly useful for creating forms that require a clear and organized presentation of fields with sections that benefit from a tabular structure.

Number of Rows: Number of rows that will display in the Table.

Number of Columns: Number of columns that will display in the Table.

Clone Row Components: Clones the components that are in a cell of one of the columns to all the other cells of that column. Use this if you want to add a lot of Table rows that will have the same content.

Cell Alignment: Horizontal alignment for cells of the Table. Can be Left, Center and Right.

Striped: Adds striped shading to the Table rows.

Bordered: Adds visible borders for the Table.

Hover: Highlights a row on a mouse hover.

Condensed: Condenses the size of the Table, making it takes less space.

Tabs​

The Tabs component organizes fields into separate tabbed sections. Users can navigate between tabs using a tab bar, with each tab displaying a specific group of components. Only one tab is visible at a time in the rendered form. The component’s styling is currently based on Bootstrap Navs.

Tabs: A data grid that allows adding, configuring, reordering, and removing tabs.

Vertical Layout: Makes the navigation bar display in a vertical orientation instead of the default horizontal layout.

Well​

The Well component is used to improve form layout and provide visual separation, making the enclosed components more user-friendly and visually distinct. Wells are rendered inside a styled with classes mapped to Bootstrap Cards.

There are no Unique settings for the Well