Layout Components

Learn more about Layout components

Layout components are used to change the general layout and position of fields on a form. Utilize HTML or a WYSIWYG editor to add logos, headers, or static contextual language to the form. You can find information for each of the Layout Components like unique settings, JSON code, and field examples below:

HTML Element

An HTML Element component may be added to a form to display a single HTML Element. This is useful if you wish to quickly insert and configure some HTML in your form. All unsafe HTML is stripped before rendering to prevent cross-site scripting exploits. This includes tags like <script>, <embed>, and <style>, and attributes like onmouseover or onload.

Ensure all HTML elements are properly closed as misconfigured HTML can cause issues with moving or editing other components on the form.

If writing HTML is not your preference, use the WYSIWYG editor with the Content component as an alternative to writing HTML.

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.


A Content component may be added to a form to provide non-field information such as contextual language, headers, or media. For example, if you need instructions at the top of a form that is for display only, use the Content component. The Content component value is not submitted back to the server.

A WYSIWYG editor has been provided to help with formatting the content. If you use the HTML view of the editor, note that all unsafe HTML is stripped before rendering to prevent cross-site scripting exploits. This includes tags like <script>, <embed>, and <style>, and attributes like onmouseover or onload.

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


This component can be used for grouping other components, like Text Field, Text Area, Checkbox etc., into configurable columns. Use Columns if you want to display more than one component in one line or to save vertical space on your form.

Column Properties: Here you can configure a number of columns that will be displayed in a form and specify the width setting for each column. When configured, you can easily rearrange the columns using the drag & drop feature without a need to make everything from scratch.

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

To evenly span your columns across the width of the form, the Column Property Width needs to equal 12 between all columns.

Field Set

A Field Set can be used to create a title for an area of the form or grouping of components. This is useful to put inside Layout components or in between lots of related components. The Field Set is for display only and will not be saved to the API.

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


A Panel is used to wrap groups of fields with a title and styling. Use the Panel to organize your components and create a more appealing UI. Styling currently maps to Bootstrap Card - Header and Footer.

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.


Create a Table with columns and rows that allow adding additional components within it.

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.


This component groups different sets of fields together into separate tabs. Similar to a Wizard flow, users can switch between tabs using a navigation bar with tab buttons, each of which opens a set group of components. Only one tab at a time displays in a rendered form. The Tab CSS currently maps to 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.


Use a well to differentiate or highlight a specific section of the form. Wells are wrapped in a div with a class currently map to Bootstrap Cards.

There are no Unique settings for the Well

Last updated