Skip to main content

Form Builder Overview

The Buildocs UI Engine visual editor allows you to design, configure, and publish fully functional forms without writing code. Using a drag-and-drop interface, you can quickly create structured forms, apply validation rules, and control how users interact with your data.

This makes it easy to build everything from simple data collection forms to complex workflows with conditional logic and advanced components.

Accessing the Form Builder​

Follow these steps to open and start working with the Form Builder:

  1. Log in to the Buildocs UI Engine dashboard
  2. Create a new project or open an existing one
  3. Click Create Form to start from scratch, or select an existing form to edit

Each form belongs to a project, allowing you to organize related forms and manage them centrally.

Interface Layout​

The Form Builder interface is divided into three main areas that work together: the canvas, the component palette, and the properties panel.

Canvas​

The canvas is the main design workspace where your form is visually assembled.

Here you can:

  • Drag and drop components into place
  • Arrange and reorder fields
  • Structure the layout using sections and columns
  • See a live preview of how the form will look to end users

Think of the canvas as the “what you see is what you get” view of your form.

Component Palette​

The component palette contains all available building blocks for your form, organized by category for quick access.

Common groups include:

  • Input Fields – text, number, date, email, and other basic inputs
  • Selection – dropdowns, checkboxes, radio buttons, and multi-select controls
  • Layout – sections, rows, and columns to structure content
  • Advanced – tables, file uploads, signatures, and specialized components

Simply drag any component from the palette onto the canvas to add it.

Properties Panel​

The properties panel displays settings for the currently selected component. This is where you customize behavior and appearance.

You can configure:

  • Field labels and placeholders
  • Required fields and validation rules
  • Conditional visibility and logic
  • Default values
  • Styling and layout options

This panel gives you full control over how each element functions and looks.

Basic Workflow​

Creating a form typically follows this process:

  1. Drag components from the palette onto the canvas
  2. Configure each component’s properties
  3. Organize the layout using sections and columns
  4. Add validation rules and conditional logic as needed
  5. Preview and test the form to ensure correct behavior
  6. Publish when the form is ready for use

This workflow helps you move from design to deployment quickly while maintaining full flexibility and control.