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/ (38 files) |
| Context | frontend/src/contexts/FormBuilderContext.tsx |
| Field types | shared/constants.ts |
| Locales | frontend/src/locales/{de,en}/formBuilder.json |
i18n
Form-builder strings live in dedicated locale files (formBuilder.json per language). i18n.ts imports them and merges them into the default translation namespace and registers them as a separate formBuilder namespace — keys resolve via both t('formBuilder.key') and t('formBuilder:key'). Test setup (i18n-test.ts) keeps its own inline translations; locale sub-keys are merged surgically there to avoid clobbering inline defaults.
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
Form templates (together with document templates and filters) are baselined from staging into local/preview/development environments via an atlas migration (PR#1789); mock data no longer creates them — staging is the source of truth for the template catalog.
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