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 formatted static 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	Separate 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 ideal for users who prefer not to write HTML manually.

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 on smaller screens.

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 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. 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.

Setting	Description
Theme	Apply color themes to the panel.
Collapsible	Enable expand/collapse behavior.
Initially Collapsed	Start in collapsed state (if collapsible).

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 table dimensions,
Clone Row Components	Duplicate cell content across rows.
Cell Alignment	Align content left, center, or right.
Striped	Alternate row shading.
Bordered	Add visible borders.
Hover	Highlight row on mouseover.
Condensed	Reduce table spacing.

Tabs

Tabs allow you to group fields into separate sections that users can navigate through using tab buttons. This is useful for breaking down long forms into manageable parts. Tabs can be displayed horizontally or vertically.

Setting	Description
Tabs	Add, reorder, or remove tab groups.
Vertical Layout	Switch to vertical tab navigation.

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.