Form block
Embeds a form from the Forms module, with captcha, validation and accessible status messages.
On this page
The Form block embeds a form built in the Forms collection. It exists only when the Forms module is on.
Where it is offeredLink to this section
Offered at root, region and fragment tier (never slot), gated on the Forms module: the forms plugin option in withSysthema() and blocks.form in systhema.config.ts. Its Width alignment control is hidden at fragment tier: inside a card / accordion / rich-text body the form inherits that container and always renders at default width.
FieldsLink to this section
| Field | Type | Label | Default | Notes |
|---|---|---|---|---|
_tier | select | Options: root (Root), region (Region), fragment (Fragment), slot (Slot), stack (Stack) | ||
form | relationship | Select a form | Required; Related to forms | |
hiddenFields.name | text | Field Name | Required | |
hiddenFields.value | text | Value | Required | |
hiddenFields | array | Hidden Fields | ||
message | ui | |||
width | radio | Width alignment | default | Required; Shown when (hasValue?hasValue(siblingData):true)&&siblingData?._tier!=="fragment"; Options: default (Default), container (Container) |
AccessibilityLink to this section
Submission and captcha errors use role="alert", the success confirmation is a focusable role="status" region, and email, country and state fields set the matching autocomplete value.
CaptchaLink to this section
A form can carry one reCAPTCHA or Turnstile field, loaded only when the form is about to be used; see Captcha.
Rendered outputLink to this section
Renders the form with Systhema's form components; see Form and Form fields.
ConverterLink to this section
formConverter consumes the populated form document and its fields. It returns nothing for an unresolved form ID. It builds initial values, submit-button presentation, captcha loading and confirmation behavior for FormBlockClient. Fragment-tier forms inherit the parent width. Systhema's page rendering pipeline populates form relationships before conversion; use RenderForm when rendering a resolved form directly.
CustomizingLink to this section
Import FormBlock from @systhemaui/payload/blocks as the starting schema for a project block. Register the definition and your renderer through customBlocks, using type: 'block' and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing form slug takes precedence over the built-in converter. Keep the fields that renderer reads, including populated relationships and nested editor states.
See Registering blocks for the configuration pattern and Converters for the renderer contract. A project converter used in client-mode live preview also needs browser registration.