Skip to main content

Forms

Forms are one of the core building blocks of Buildocs UI Engine.

But unlike traditional form builders, forms here are not just submission pages.

They are dynamic, runtime-controlled interfaces that can be part of larger workflows, embedded applications, document processes, and full business systems.

A form can be simple — like a contact form — or complex, like a multi-step approval workflow with nested dialogs, file handling, and backend-driven actions.

What is a Form?​

A form is a structured interface made of fields, layout elements, and runtime behavior.

It defines:

  • input fields and their types
  • layout and visual structure
  • validation rules
  • conditional logic
  • dynamic visibility
  • backend interactions
  • workflow actions

In Buildocs UI Engine, a form is not isolated.

It can trigger modals, communicate with your backend, open document previews, update tables, and become part of a much larger application flow.

This is why we call it a UI Engine — not just a form builder.

Why Use Buildocs UI Engine?​

Building forms from scratch is repetitive, expensive, and hard to maintain.

Every serious application needs forms, but keeping them consistent across products and teams usually creates unnecessary frontend work.

Buildocs UI Engine solves that.

Consistency​

Maintain a uniform look and feel across all forms and interfaces in your application.

Speed​

Build complex forms in minutes instead of hours of frontend coding.

Flexibility​

Update forms, workflows, and UI behavior without deploying new frontend code.

Separation of Concerns​

Designers and product teams can manage form structure while developers focus on business logic and backend workflows.

Responsive by Default​

Forms automatically adapt to different screen sizes without extra implementation work.

Runtime Control​

Your backend can dynamically control how forms behave after they are rendered.

This is the biggest difference from traditional form builders.

Building Forms with Drag and Drop​

Buildocs UI Engine includes a visual editor that lets you build forms quickly using drag and drop.

No coding is required to define the structure.

You simply:

  • drag components onto the canvas
  • organize layout visually
  • configure field properties
  • define validation and behavior
  • connect runtime actions

This makes collaboration much easier between developers, product teams, and non-technical users.

Developers keep control of logic.

Teams move faster on UI changes.

Layout System: Rows and Segments​

Forms use a row-based layout system designed for flexibility and responsive design.

This creates predictable layouts that work well across desktop, tablet, and mobile devices.

Rows​

A row is a horizontal container that spans the full width of the form.

Rows stack vertically and contain one or more segments.

You can think of rows as the main structural blocks of the form.

Each row defines one horizontal layer of the interface.

Segments​

Each row is divided into segments.

Segments control how the row’s width is distributed between fields.

Rules​

  • a row can have 1, 2, 3, or more segments
  • each segment can hold one input element
  • segment widths can be equal or use custom proportions

This makes layouts predictable and easy to maintain.

For example:

  • one full-width email field
  • two side-by-side name fields
  • three smaller address fields in one row
┌─────────────────────────────────────────────────┐
│ Row 1                                           │
│ ┌─────────────────────────────────────────────┐ │
│ │ Segment (Full Width) - Email Input          │ │
│ └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│ Row 2                                           │
│ ┌──────────────────┐ ┌──────────────────┐       │
│ │ Segment - First  │ │ Segment - Last   │       │
│ │ Name Input       │ │ Name Input       │       │
│ └──────────────────┘ └──────────────────┘       │
└─────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────┐
│ Row 3                                           │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐    │
│ │ City       │ │ State      │ │ Zip Code   │    │
│ └────────────┘ └────────────┘ └────────────┘    │
└─────────────────────────────────────────────────┘