Forms

The Forms module, the Form block and rendering a form from a client view.

On this page

The Forms module adds Payload's form builder to a Systhema project: a Forms collection, a Form Submissions collection and the Form block that places a form on a page.

Turning it onLink to this section

Enable it with the forms plugin option and blocks.form in systhema.config.ts. Both collections are grouped under a Forms sidebar group; see Plugin options.

The object form forwards Payload form-builder configuration as well as Systhema options:

src/payload.config.ts

withSysthema(payloadConfig, {
  forms: {
    enabled: true,
    fields: { country: true, state: true },
    autoSubmissionColumns: true,
  },
})

Here payloadConfig is your existing Payload configuration. In the design-system config, keep blocks.form enabled to offer the Form block. Disabling that block's picker does not itself remove the Forms collections.

Form schemaLink to this section

Each form stores a title and an ordered fields blocks array. Field name is the submitted key; label is the visible text. Keep names stable when changing labels so stored answers and notification variables remain identifiable. Fields carry required, width and type-specific options.

Systhema enables text, email, date, number, textarea, select, radio, checkbox, file and message fields by default. Message is labeled Note in Admin. Country and state are opt-in. reCAPTCHA and Turnstile appear only when configured with provider keys.

The form also configures submit-button text and appearance and either a rich-text confirmation or redirect destination. Custom field definitions and collection overrides follow the form-builder plugin configuration passed through forms.

Access and submissionsLink to this section

Form administration uses forms.* capabilities. The submission endpoint accepts both anonymous and signed-in visitors, so logging into Admin does not stop a visitor form from submitting. Reading submissions requires form-submissions.read; deleting requires form-submissions.delete. Submission updates are disabled.

FormBlockClient posts to /api/form-submissions, handles validation errors and confirmation state, and resolves configured redirect targets. Notification email settings require an email adapter; they do not require enabling the separate Emails templates module.

Placing a formLink to this section

Editors embed a form with the Form block.

Rendering a form from a client viewLink to this section

RenderForm renders a form from a server or a client component; see Imports in 'use client' files for the option lists the country and state fields need.

Notifications, captcha and submissionsLink to this section

Each form can send notification emails (Emails), carry a captcha (Captcha), and its submissions get readable list columns (Submission columns) and exports (Import and export).

Localized formsLink to this section

With content locales on, choice options gain a translatable label beside the stored value; see Content localization.