Layout Components

Layout components help structure and visually organize form fields. They allow you to insert branding elements like logos, headers, or static text using either HTML or a WYSIWYG editor. Below is a breakdown of each layout component, including its purpose and configuration options.

Component	Description	Use Case
HTML	Embed custom HTML, such as headers, images, or other markup. Supports dynamic data rendering.	Write raw HTML for customized layouts and dynamic content.
Content	Add format text using a WYSIWYG editor.	Style text, embed media, and add hyperlinks.
Columns	Arrange fields side-by-side in a responsive layout. Adjustable widths for each column.	Create multi-column forms or layouts for better visual structure.
Field Set	Group related fields under a labeled section with a legend.	Visually organize related inputs for clarity.
Panel	Create collapsible sections with optional themes.	Organize fields into expandable areas for better navigation.
Table	Display fields in a tabular format. Supports row/column definitions, cell cloning, and content alignment.	Present structured data or repeatable field groups.
Tabs	Group fields into tabbed sections with horizontal or vertical navigation.	Improve form usability by categorizing content.
Well	Visually separate content using styled containers (e.g., Bootstrap classes).	Highlight or isolate specific sections of a form or page.

Please note that there is a 2MB limit on the size of the form. Embedding large images using an inline <svg> tag for a high-resolution image can cause the form to exceed this limit, preventing it from being saved. To avoid this issue, we recommend using the <img> tag with a URL pointing to the image hosted externally. This keeps the form size small and ensures it can be saved without issues.

HTML

The HTML Element component allows you to embed custom HTML directly into your form. This is ideal for adding raw HTML headers, images, or other static content. It supports dynamic rendering using form data and is useful for advanced customization. Unsafe HTML is automatically sanitized to ensure security.

To ensure smooth editing and prevent layout issues, always make sure that all HTML elements are properly closed. Improperly structured HTML can interfere with the movement or modification of other components within the form.

Unique Setting	Description
HTML Tag	Specifies the type of HTML tag to render (e.g., div, span, a, img). This determines how the content is displayed and interacts with other elements.
CSS Class	Assigns one or more CSS classes to the element. You can include multiple classes by separating them with spaces. These classes control the styling of the element.
Attributes	Allows you to define additional HTML attributes and their values. Common examples include href for links and src for images.
Content	The inner text or HTML content of the element. While you can include nested HTML tags here, it's recommended to use the Content component for more complex layouts and easier editing.
Refresh on Change	Forces the element to re-render whenever any value in the form changes. This is useful for displaying dynamic content based on user input. To reference other components, use the syntax {{ data.{componentApiKey} }} and activate this setting.

Content

The Content component is used to insert static, non-submittable content into a form. It’s perfect for adding instructions, headers, or media using a WYSIWYG editor. This component is especially useful for users who prefer a visual editing experience. The value of the Content component is not submitted to the server when the form is submitted.

Unique Setting	Description
Heading	Choose between Heading levels 1–3 or Paragraph to structure your content.
Font Family	Select your preferred font style to match branding or design preferences.
Font Size	Adjust the text size from large to small to control emphasis.
Font Emphasis	Apply bold or italic styling to highlight key content.
Link	Add a hyperlink to direct users to external resources or pages.
Indent	Increase or decrease text indentation to create visual hierarchy.
Insert Media	Upload images from your device or embed online videos using a URL.
Align	Align text to the left, center, or right based on layout needs.

Columns

The Columns component helps you display multiple fields side-by-side in a single row. It’s useful for saving vertical space and creating a more compact layout. Columns are responsive and will stack vertically and collapse when the form is rendered on a mobile device.

Unique Setting	Description
Column Properties	Defines the number of columns available in the layout. Once configured, components can be added by dragging and dropping them into each column’s drop zone.
Auto Adjust Columns	Automatically shifts column positions if all nested components in one column are hidden, ensuring a balanced layout.

To evenly distribute columns across the form’s width, ensure the combined width of all columns equals 12. This maintains consistent spacing and alignment.

Field Set

Field Sets allow you to visually group related fields under a common heading or section. This helps improve form organization and readability.

Field Sets are for display purposes only and are not included in the form submission.

Unique Setting	Description
Legend	Title displayed for the field sets.

Panel

Panels are used to group form components into collapsible or expandable sections. They help reduce visual clutter and improve navigation in complex forms. Panels can be themed and styled using Bootstrap classes. Panels can include a title and be configured to open or close by default, making them ideal for organizing content and minimizing distractions.

Setting	Description
Theme	Choose a theme to apply a specific class to the panel’s wrapper. This changes the header’s appearance to match the selected style.
Collapsible	Enable this setting to allow users to toggle the panel open or closed.
Initially Collapsed	If enabled, the panel will start in a collapsed state when the form loads. This option only works when the Collapsible setting is turned on.

Table

The Table component allows you to organize fields in a grid-like structure. It’s ideal for forms that require structured data entry or comparison across rows and columns. Tables can be styled and configured for better readability.

Setting	Description
Rows & Columns	Define how many horizontal rows and vertical columns the table layout will contain.
Clone Row Components	Automatically replicate the content of one cell across all cells in the same column. This is helpful when multiple rows share identical input fields.
Cell Alignment	Set the horizontal alignment of content within each cell—choose from left, center, or right.
Striped	Apply alternating shading to rows for improved readability.
Bordered	Add visible borders around table cells to enhance visual separation.
Hover	Highlight a row when the user hovers over it with the mouse.
Condensed	Reduce the overall spacing within the table to save space and create a more compact design.

Tabs

Tabs allow you to group fields into separate sections that users can navigate through using tab buttons. Only one tab is visible at a time in the rendered form, allowing users to focus on one section without distraction. This is useful for breaking down long forms into manageable parts. Tabs can be displayed horizontally or vertically.

Setting	Description
Tabs	A data grid interface to add, configure, reorder, or remove individual tabs.
Vertical Layout	Changes the tab navigation from horizontal (default) to a vertical orientation.

Well

The Well component is a simple container used to visually separate content within a form. It enhances readability and structure without adding functional behavior. Styled using Bootstrap card classes, it’s ideal for highlighting sections.