Form container that holds FormElement children for collecting user input
Required Props: idSupports Children: FormElement
Structure
All styling goes in props.className as a single Tailwind utility string. Non-class props (text, src, alt, etc.) stay on their own keys. root.animation for scroll effects.
Properties
Property
Type
Description
Examples
action
string
Form submission URL
/api/submit
method
string
GET | POST
HTTP method
Default: "POST"
-
submissionType
string
| iframe | save | emailSave | custom | collection
Type of form submission
Default: ""
-
collectionSlug
string
Target collection slug when submissionType is 'collection'
-
collectionFieldMap
object
Map of collection field key → form input name (an OBJECT, not a JSON string). Omit an entry to auto-match by identical name. Every REQUIRED collection field without a default must be mapped or auto-matched, or submissions 400. Fields with formWritable:false are stripped server-side and can never be set by a form.
-
collectionFieldValues
object
Author-set constant values forced on every submit, e.g. { "public": false } for a moderation gate. Read server-authoritatively from the saved form node (never trusted from the request body), so visitors can't override them. A field is either mapped to an input OR given a fixed value, not both.
-
collectionSkipEmail
boolean
When submissionType is 'collection', skip the email notification
-
formName
string
Name identifier for the form
My Form
formType
string
subscribe | contact
Type of form to display
Default: "subscribe"
-
view
string
| loading | loaded
Editor preview of the form view state. Editor-only. For the published site, author the states yourself: wrap every input + the submit Button in a Container with visibilityStateKey "form:<formNodeId>:fields", and add sibling Containers (className starts "hidden") with visibilityStateKey "form:<formNodeId>:loading" and "form:<formNodeId>:loaded" holding the sending / thank-you copy. Without them an MCP-built form shows no confirmation after submit.
Default: ""
-
loading
string
Loading message for the editor-created loading slot only. MCP-built forms don't have that slot; use a "form:<formNodeId>:loading" Container instead (see view).
Default: "Sending..."
Submitting your form...
anchor
string
HTML anchor ID for navigation
contact-form
mailto
string
Email address for emailSave form type
you@domain.com
formSettings
object
Advanced form settings
-
webhookEnabled
boolean
POST JSON payload to webhookUrl on submit
-
webhookUrl
string
HTTPS endpoint for webhook submissions
-
conversion
object
Optional Google Ads / GA4 / Meta conversion fired after a successful submit (on top of the default form_submit / Lead events). Providers: 'google-ads' (sendTo='AW-XXX/YYY' required, eventName ignored — always 'conversion'), 'ga4' ('Lead' or custom eventName), 'meta' (fbq track event). Site-level integration must be configured (set_integrations).
-
successAction
string
| redirect
After successful submit
-
successUrlField
string
Dot path into the JSON response from `action` whose value becomes the redirect target (e.g. "url", "data.checkoutUrl"). Only for submissionType "custom" with successAction "redirect"; takes precedence over the static successUrl. This is how hosted checkouts work — the URL only exists once the endpoint creates the session — so it removes the need for hand-written fetch/redirect code in a Button onclick. Non-http(s) targets are refused.