Skip to main content

Layout Components

Layout components help you organize the structure of your form, creating a more intuitive and user-friendly interface.

Available Layout Components​

  • HTML Element: Custom HTML content
  • Content: Static text or rich content display
  • Columns: Creates multi-column layouts
  • Fieldset: Groups related fields together
  • Panel: Container with optional header and styling
  • Table: Structured data display
  • Tabs: Organizes content into tabbed sections
  • Well: Container with inset effect for content

Using Layout Components​

To add a layout component to your form:

  1. Locate the component in the Layout Components section of the sidebar
  2. Drag the component onto the form canvas
  3. Click on the component to select it
  4. Configure its properties in the Component Settings Panel
  5. Add other components inside the layout component as needed
note

Layout components help organize your form structure, while all other input components are found in the Input Components section of the sidebar.

Component Details​

HTML Element​

Purpose: Inserts custom HTML directly into your form.

Configuration Options:

  • HTML Content: Raw HTML code to display
  • Label: Optional label for the element
  • Custom CSS Class: Apply custom styling

Best Practices:

  • Use for custom formatting not possible with standard components
  • Keep HTML clean and well-formed
  • Test rendering across different browsers
  • Consider accessibility implications
  • Useful for:
    • Adding custom formatting
    • Embedding external content
    • Creating custom UI elements

Content​

Purpose: Displays static text or rich content to users.

Configuration Options:

  • Content: Rich text editor for formatting
  • Label: Optional label for the content
  • Custom CSS Class: Apply custom styling

Best Practices:

  • Keep content concise and relevant
  • Use consistent formatting throughout the form
  • Include images only when they add value
  • Consider accessibility (alt text for images)
  • Ideal for:
    • Instructions
    • Explanations
    • Terms and conditions
    • Informational text

You can format the content using a rich text editor with options for headings, lists, links, and more.

Fieldset​

Purpose: Groups related fields together with an optional legend.

Configuration Options:

  • Legend: Title for the fieldset
  • Collapsible: Allow fieldset to be collapsed/expanded
  • Initially Collapsed: Start in collapsed state
  • Custom CSS Class: Apply custom styling

Best Practices:

  • Use to organize related fields logically
  • Keep legends short and descriptive
  • Use collapsible fieldsets for optional sections
  • Nest fieldsets carefully to avoid excessive indentation

Columns​

Purpose: Creates multi-column layouts for form fields.

Configuration Options:

  • Column Widths: Size of each column (equal, custom percentages)
  • Number of Columns: How many columns to create
  • Responsive Behavior: How columns behave on small screens
  • Custom CSS Class: Apply custom styling

Best Practices:

  • Use for related fields that work well side-by-side
  • Consider mobile users (columns stack on small screens)
  • Balance column widths appropriately
  • Don't overcrowd columns with too many fields

Tabs​

Purpose: Organizes content into tabbed sections.

Configuration Options:

  • Tab Labels: Names for each tab
  • Default Tab: Which tab is initially active
  • Custom CSS Class: Apply custom styling

Best Practices:

  • Use for organizing distinct sections of a form
  • Keep tab labels short and descriptive
  • Group related fields within each tab
  • Consider using vertical tabs for many sections

Panel​

Purpose: Container with optional header and styling.

Configuration Options:

  • Title: Header text for the panel
  • Theme: Color theme for the panel
  • Collapsible: Allow panel to be collapsed/expanded
  • Initially Collapsed: Start in collapsed state
  • Custom CSS Class: Apply custom styling

Best Practices:

  • Use to visually separate sections of a form
  • Use consistent panel themes throughout your form
  • Use collapsible panels for optional sections
  • Keep panel titles short and descriptive

Table​

Purpose: Displays structured data in rows and columns.

Configuration Options:

  • Headers: Column header labels
  • Number of Rows: Initial number of rows
  • Cell Types: Type of component in each cell
  • Custom CSS Class: Apply custom styling

Best Practices:

  • Use for displaying structured data
  • Keep column headers short and descriptive
  • Consider mobile responsiveness (tables can be difficult on small screens)
  • Use appropriate cell types for different data

Well​

Purpose: Creates a container with an inset effect for content, providing visual separation.

Configuration Options:

  • Label: Optional title for the well
  • Description: Additional information about the well
  • Custom CSS Class: Apply custom styling
  • Size: Controls the padding and border radius (small, normal, large)

Best Practices:

  • Use to visually separate and highlight content sections
  • Useful for grouping related fields with a distinct visual style
  • Can be used to draw attention to important information
  • Provides a subtle alternative to panels when you want a more subdued container
  • Works well for:
    • Important notes or instructions
    • Highlighting key form sections
    • Creating visual hierarchy