> ## Documentation Index
> Fetch the complete documentation index at: https://docs.encoreos.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Form Editor

> Visual form builder with drag-and-drop fields, wizard config, portal integration, and PDF preview at /fw/forms/edit.

The Form Editor screen is a full-featured form builder used to create and edit forms and is available at `/fw/forms/edit` (also `/fw/forms/new` for creation).

## Overview

This screen loads an existing form when an `id` query parameter is present (`useFormDefinition`). It exposes a multi-tab editor covering: **Builder** (draggable field list with `DraggableFieldList` and `FieldEditorDialog`), **Wizard** (`WizardConfigPanel` + `WizardPreview`), **Portal** (`PortalConfigPanel`), **PDF** (`PdfExportSettingsPanel` + `PdfPreviewPanel`), **Permissions** (`PermissionManager`), and **History** (`FormVersionHistory`). Fields can be added, edited, reordered, and deleted. AI field suggestions are available via `SuggestWithAIDialog`. Form quality scoring is available via `FormQualityScoringDialog`. Save is blocked when the form name is empty, no organization is selected, or no fields are defined. Saving publishes or drafts the form.

## Who it's for

* `/fw/forms/new` — requires `fw.forms.create` (`FW_PERMISSIONS.FORMS_CREATE`).
* `/fw/forms/edit` — requires `fw.forms.edit` (`FW_PERMISSIONS.FORMS_EDIT`).

## Before you start

* For new forms, hold `fw.forms.create`.
* For editing existing forms, hold `fw.forms.edit` and supply the `id` query parameter.
* An organization must be selected (from `useOrganization`).

## Steps

<Steps>
  <Step title="Open the editor">Navigate to `/fw/forms/new` to create, or `/fw/forms/edit?id=<formId>` to edit.</Step>
  <Step title="Set form metadata">Enter the form name and description.</Step>
  <Step title="Add fields">Use the **Builder** tab to add fields. Each field opens `FieldEditorDialog` for configuration.</Step>
  <Step title="Reorder fields">Drag fields in `DraggableFieldList` to set the display order.</Step>
  <Step title="Configure wizard">Switch to the **Wizard** tab to set up step-based wizard presentation.</Step>
  <Step title="Configure portal">Switch to the **Portal** tab to control external portal availability.</Step>
  <Step title="Preview PDF">Switch to the **PDF** tab to configure and preview a PDF export layout.</Step>
  <Step title="Set permissions">Switch to the **Permissions** tab to manage who can submit this form.</Step>
  <Step title="Save">Click **Save**. The form is saved as draft or published depending on the current status setting.</Step>
</Steps>

## Key concepts

* **Prefill rules** — configured via `PrefillRulesPanel`; SME: confirm data sources available for prefill.
* **Wizard config** — multi-step presentation of a form; configured via `WizardConfigPanel`.
* **Form quality score** — a score computed by `FormQualityScoringDialog`; SME: confirm scoring criteria.

## Related

<Columns cols={2}>
  <Card title="Forms & Workflow" icon="diagram-project" href="/fw/overview">
    Forms & Workflow core overview.
  </Card>

  <Card title="Governance & parity" icon="scale-balanced" href="/governance/index">
    Documentation coverage and governance.
  </Card>
</Columns>

<Note>
  This page documents shipped product behavior. It is not medical, legal, or
  billing advice. Verify against your organization's policies and applicable
  regulations before using it for clinical, compliance, or billing decisions.
  Protected health information (PHI) shown in the product is governed by your
  tenant's access controls and is never exposed in this documentation.
</Note>

<Accordion title="Documentation sources">
  * src/routes/fw\.tsx
  * src/cores/fw/pages/FormEditor.tsx
  * src/platform/permissions/constants.ts
</Accordion>