Form Builder

Dynamic form creation system (v3) with a visual editor. Admins create form templates that are rendered in the Portal for customer completion.

Architecture

Layer	Location
Editor page	frontend/src/pages/admin/FormBuilder.tsx
Components	frontend/src/components/form-builder/ (29 files)
Context	frontend/src/contexts/FormBuilderContext.tsx
Field types	shared/constants.ts

Editor Components

Component	Purpose
FormBuilderEditor	Main editor canvas — drag/drop field arrangement
FormBuilderSidebar	Field type palette and form structure tree
FormBuilderPreview	Live preview of the form as end users will see it
FieldConfigPanel	Property editor for selected field (label, validation, placeholder)

Advanced Features

Conditional Logic

Located at frontend/src/components/form-builder/condition-editor/:

Fields can show or hide based on other field values. The condition editor provides a visual interface for defining rules like “show field B when field A equals X”.

Triggers

The TriggerEditor component allows defining field interaction triggers — actions that fire when a user interacts with a field (e.g., auto-populate another field, show a warning).

Sections

Forms are organized into sections that group related fields. Sections support ordering and can be collapsed in the editor.

Form Rendering

The FormWizard component (in frontend/src/components/portal/FormWizard/) renders completed form templates as multi-step wizards in the Portal. Each section becomes a wizard step.

Data Flow

Admin creates form (FormBuilder) --> Form template stored in DB
  --> Customer opens portal --> FormWizard renders template
  --> Customer fills form --> Responses stored as [[Forms]] entity
  --> Internal team reviews submissions

Context State

FormBuilderContext.tsx manages:

• Currently selected form
• Active section and field
• Drag state for field reordering
• Undo/redo history

Related

• Forms — form data entities (templates and submissions)
• Portal — where customers fill out forms
• Document Obtaining — forms can trigger document requests
• Validation Pattern — field-level validation rules
• Component Decomposition — editor follows decomposition pattern
• State Management — context usage for editor state