Skip to main content

Forms

Forms are the primary building blocks in Buildocs UI Engine.

What is a Form?​

A form is a structured collection of fields and layout elements that define:

  • Input fields and their types
  • Layout and organization
  • Validation rules
  • Conditional logic

Why Use Buildocs UI Engine?​

Building forms from scratch is time-consuming and repetitive. Every application needs forms for data collection, but implementing them consistently across your product requires significant effort:

  • Consistency - Maintain uniform look and feel across all forms in your application
  • Speed - Build complex forms in minutes instead of hours of coding
  • Flexibility - Update forms without deploying new code
  • Separation of Concerns - Let designers and product teams manage form structure while developers focus on business logic
  • Responsive by Default - Forms automatically adapt to different screen sizes

Building Forms with Drag and Drop​

Buildocs UI Engine provides a visual editor that lets you build forms in minutes using drag and drop. No coding required to define the form structure - simply drag components onto the canvas and configure their properties.

Layout System: Rows and Segments​

Forms use a row-based layout system designed for responsive design:

Rows​

A row is a horizontal container that spans the full width of the form. Rows stack vertically and contain one or more segments.

Segments​

Each row is divided into segments. Segments control how the row's width is distributed among its contents:

  • A row can have 1, 2, 3, or more segments
  • Each segment can hold one input element
  • Segment widths can be equal or custom proportions
┌─────────────────────────────────────────────────┐
│ Row 1                                           │
│ ┌─────────────────────────────────────────────┐ │
│ │ Segment (Full Width) - Email Input          │ │
│ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────┐
│ Row 2                                           │
│ ┌──────────────────┐ ┌──────────────────┐       │
│ │ Segment - First  │ │ Segment - Last   │       │
│ │ Name Input       │ │ Name Input       │       │
│ └──────────────────┘ └──────────────────┘       │
└─────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────┐
│ Row 3                                           │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐    │
│ │ City       │ │ State      │ │ Zip Code   │    │
│ └────────────┘ └────────────┘ └────────────┘    │
└─────────────────────────────────────────────────┘

Responsive Behavior​

The row and segment system enables responsive layouts that adapt to different screen sizes:

  • On desktop, segments display side by side within a row
  • On tablet, segments may reflow based on available space
  • On mobile, segments typically stack vertically for better readability

This approach ensures your forms look great on any device without additional configuration.

Form Structure​

Forms consist of:

  • Rows - Horizontal containers that organize the form vertically
  • Segments - Divisions within rows that control horizontal layout
  • Fields - Input elements placed inside segments for data collection
  • Sections - Optional groupings to organize related rows with headers

Theming​

Forms inherit their visual appearance from your project theme settings. This means:

  • Colors, fonts, and spacing are applied automatically
  • All forms in a project share a consistent look
  • Theme changes update all forms instantly
  • No need to style individual forms manually

Configure your theme once at the project level, and every form renders with your brand's visual identity.