Skip to main content
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

1

Open Web Forms

Navigate to /ce/web-forms from the CE navigation.
2

Search and filter

Use the search field to filter forms by name. Use the Status dropdown to show All, Active, or Inactive forms.
3

Create a new form

Click New Form to open the form builder at /ce/web-forms/new.
4

Open a form's detail page

Click a form card to navigate to /ce/web-forms/{id} for submission review and embed code.
5

Edit a form

Use the edit action on a form card to navigate to /ce/web-forms/{id}/edit.
6

Delete a form

Use the delete action on a form card. Confirm in the dialog — existing submissions are preserved.

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

Community Engagement

Community Engagement core overview.

Governance & parity

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