> ## 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.

# Web Forms

> Create, view, edit, and manage lead capture web forms — submission stats, active/inactive control, embed code, field builder, and styling.

The Web Forms page at `/ce/web-forms` is the list view for all lead capture web forms, showing form cards with submission statistics and actions to create, edit, or delete forms.

## Overview

Navigating to `/ce/web-forms` loads `WebFormsListPage`, gated by `ce.admin`. The page shows a search field, a status filter (All Statuses / Active / Inactive), and a grid of `WebFormCard` components. Each card shows form name, active/inactive status, pending and total submission counts, and edit/delete actions. The **New Form** button navigates to `/ce/web-forms/new`. Deleting a form opens an `AlertDialog` confirmation; it notes that existing submissions are preserved.

## Who it's for

Permission required: `ce.admin`

## Before you start

* An organization context must be resolved.
* Creating forms requires `ce.admin`.

## Steps

<Steps>
  <Step title="Open Web Forms">
    Navigate to `/ce/web-forms` from the CE navigation.
  </Step>

  <Step title="Search and filter">
    Use the search field to filter forms by name. Use the **Status** dropdown to show All, Active, or Inactive forms.
  </Step>

  <Step title="Create a new form">
    Click **New Form** to open the form builder at `/ce/web-forms/new`.
  </Step>

  <Step title="Open a form's detail page">
    Click a form card to navigate to `/ce/web-forms/{id}` for submission review and embed code.
  </Step>

  <Step title="Edit a form">
    Use the edit action on a form card to navigate to `/ce/web-forms/{id}/edit`.
  </Step>

  <Step title="Delete a form">
    Use the delete action on a form card. Confirm in the dialog — existing submissions are preserved.
  </Step>
</Steps>

## Key concepts

* **Form card stats** — Each card shows `pendingCount` and `totalCount` from `useAllWebFormStats`.
* **Active vs. Inactive** — Inactive forms do not accept new submissions even if the embed code is still deployed on a website.

## Viewing a web form

The Web Form Details page at `/ce/web-forms/:id` is the central management view for a single web form, combining submission statistics, status control, submission review, embed code, and settings in a tabbed layout. Permission required: `ce.admin`.

Navigating to `/ce/web-forms/:id` loads `WebFormDetailPage`. The page shows the form name, URL slug, active/inactive badge, an **Active** toggle, and an **Edit Form** button. Five stat cards show Total, Pending, Processed, Spam, and Today's submission counts. A three-tab layout provides: **Submissions** (filterable by status), **Embed** (embed code via `WebFormEmbedPanel`), and **Settings** (reCAPTCHA, assignment type, redirect URL, allowed domains, confirmation message, description — read-only). The **Active** toggle calls `updateForm` immediately and shows a success or error toast.

**Steps to work a web form detail:**

1. From `/ce/web-forms`, click a form card to navigate to `/ce/web-forms/{id}`.
2. Toggle form active status — use the **Active** switch in the page header to enable or disable submission acceptance. The change is persisted immediately.
3. Review submission statistics — read the five stat cards: Total, Pending, Processed, Spam, and Today count.
4. Review and filter submissions — in the **Submissions** tab, use the status filter in `WebFormSubmissionsTable` to view all, pending, processed, or spam entries.
5. Get embed code — switch to the **Embed** tab for the embed snippet via `WebFormEmbedPanel`.
6. View form settings — switch to the **Settings** tab to review reCAPTCHA status, assignment type, redirect URL, allowed domains, and confirmation message. Edit is done via the builder at `/ce/web-forms/{id}/edit`.
7. Edit the form — click **Edit Form** to navigate to the builder at `/ce/web-forms/{id}/edit`.

**Submission statuses** — `pending`, `processed`, `spam`. The status filter in the Submissions tab controls which records are shown.

**Slug** — Displayed in monospace below the form name; used in the embedded form's public URL.

## Creating a web form

The New Web Form page opens the form builder at `/ce/web-forms/new`, where administrators can configure a lead capture form with custom fields, branding, and spam protection before publishing it to a website. Permission required: `ce.admin`.

Navigating to `/ce/web-forms/new` opens `WebFormBuilderPage` in create mode. The builder shows a two-column layout: a settings and field editor on the left, and a live preview on the right. On save, the form is created and the browser redirects to the new form's detail page at `/ce/web-forms/{id}`.

**Before you start:** You must belong to an organization — the form is scoped to `currentOrganization`. Have the form's intended name and a URL-friendly slug ready. The slug is auto-generated from the name but can be edited before saving. Decide whether spam protection (reCAPTCHA) should be enabled on submission.

**Steps to create a form:**

1. Navigate to **Web Forms** (`/ce/web-forms`) and click **New Form**, or go directly to `/ce/web-forms/new`.
2. Configure form settings — in the **Form Settings** card, enter: **Form Name** (required), **URL Slug** (required; auto-generated from name but editable), **Description** (internal only), **Success Message** (shown after submission), **Active** toggle, and **reCAPTCHA** toggle.
3. Add and configure fields — switch to the **Fields** tab. Click **Add Field** to open the field editor dialog. Configure each field (type, label, required flag) and save. Reorder or remove fields as needed.
4. Apply styling (optional) — switch to the **Styling** tab to adjust branding, colors, and layout for the embedded form preview.
5. Review the live preview — the right column shows a live preview of the form that updates as you edit fields and styling.
6. Save the form — click **Save Form**. On success, you are redirected to the new form's detail page where you can copy embed code and review submissions.

**Default fields** — New forms start with a default field set defined in `DEFAULT_FORM_FIELDS` (see `src/cores/ce/types/web-forms.ts`).

## Editing a web form

The Edit Web Form screen is the same `WebFormBuilderPage` component used for creating new forms, but loaded in edit mode for an existing form. It is accessible at `/ce/web-forms/:id/edit`. Permission required: `ce.admin` (route-level gate).

In edit mode the builder pre-populates all fields from the existing form record: name, slug, description, active status, reCAPTCHA toggle, success message, field definitions, and styling. The form uses a two-column layout: the left column contains a Form Settings card and tabbed editors for Fields and Styling; the right column shows a live `WebFormPreview`. The slug field is read-only in edit mode (auto-generation only applies to new forms). Clicking a field in the field list opens `WebFormFieldEditor` in a dialog. Clicking Save Form calls `useUpdateWebForm` and stays on the same page. If the form ID does not exist or is not found, a "Form not found" message is shown with a link back to `/ce/web-forms`.

**Steps to edit a form:**

1. Click Edit Form from the web form detail page or navigate directly to `/ce/web-forms/:id/edit`.
2. Update form settings — adjust the form name, description, success message, Active toggle, or reCAPTCHA toggle in the Form Settings card.
3. Edit form fields — in the Fields tab, click a field to open the `WebFormFieldEditor` dialog. Reorder fields by dragging. Add new fields with the add button.
4. Adjust styling — switch to the Styling tab to update colors, fonts, or other visual settings in `WebFormStylingEditor`.
5. Preview changes — check the right-column preview to see how the form will appear to submitters.
6. Save — click Save Form to persist changes. The page remains on the edit view after saving.

**Slug in edit mode** — URL identifier used in the embed code; in edit mode, the slug field is not auto-generated from the name and is read-only.

**reCAPTCHA** — spam protection toggle; defaults to enabled on new forms.

## Related

<Columns cols={2}>
  <Card title="Community Engagement" icon="bullhorn" href="/ce/overview">
    Community Engagement core overview.
  </Card>

  <Card title="Governance & parity" icon="scale-balanced" href="/governance/index" />
</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/ce.tsx
  * src/cores/ce/pages/WebFormsListPage.tsx
  * src/cores/ce/pages/WebFormDetailPage.tsx
  * src/cores/ce/pages/WebFormBuilderPage.tsx
  * src/cores/ce/hooks/useWebForms.ts
  * src/cores/ce/hooks/useWebFormSubmissions.ts
  * src/cores/ce/types/web-forms.ts
  * src/cores/ce/components/web-forms/WebFormCard.tsx
  * src/cores/ce/components/web-forms/WebFormSubmissionsTable.tsx
  * src/cores/ce/components/web-forms/WebFormEmbedPanel.tsx
  * src/cores/ce/components/web-forms/WebFormFieldEditor.tsx
</Accordion>