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. Omit to match by identical keys.
-
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
Current form view state
Default: ""
-
loading
string
Loading state message text
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).