Guide
Fieldmark gives Framer forms real validation, steps, conditional logic, calculations, uploads and spam protection. Everything is set in the property panel. Nothing here needs code.
1
Drop Fieldmark Form on a page and pick one of the 20 templates, or drop one of the template components directly.
2
Edit the fields, wording and theme in the property panel.
3
To deliver submissions, place the component inside a native Framer form and set that form’s destination (email, Google Sheets, webhook). Or leave it on its own and paste a Webhook URL under Destination.
Already designed your form?
Keep it. Drop the Fieldmark component inside or beside your native Framer form and add Field Rules by field name. The field name is the Name you gave each input in Framer. Required, email, phone and number inputs are checked even with no rules at all.
Steps
In Fieldmark Form, set a Step number on each field. In your own form, name the stacks Step 1, Step 2 and so on, and name two layers Next and Back. Optional layers named Progress Fill and Step Count are filled in for you. Each step is checked before the visitor can continue.
Show a field only when it is needed
On any field, set Show When to another field’s name and a value. In your own form, add Logic rules on the Fieldmark component: show, hide, require, make optional, disable, or skip a step.
Calculations
Add a Calculation field and write a formula such as {Quantity} * 25. Field names go in braces. You can use + - * /, comparisons, contains, and a ? b : c. The result updates as the visitor types and is submitted with the form.
Error messages
Messages appear under each field and are announced to screen readers. To place one yourself, add a text layer named Error followed by the field name, for example Error Email. Every message can be reworded under Messages, and Language switches all of them to Spanish, French, German, Portuguese, Italian, Arabic or Hebrew. Arabic and Hebrew also turn the form right-to-left. The translations are machine-written; reword any you would phrase differently.
File uploads
Add a File Upload field and choose a storage under Uploads. Uploadcare needs only your public key. Cloudinary needs a cloud name and an unsigned upload preset and is in beta. Files go straight from the visitor’s browser to your storage account and the form submits the link.
Spam and captcha
A hidden trap and a minimum fill time are on by default. For a visible check, paste a Cloudflare Turnstile site key under Captcha.
After a successful submit
Fieldmark Form shows its success message, or sends the visitor to the address under After Success, with any fields you list added to the address. Inside a native Framer form, Framer’s own success behaviour applies.
For developers
Every form exposes window.Fieldmark.get(id) with validate, values, errors, setError, next, back and goTo. The form fires fieldmark:ready, fieldmark:field, fieldmark:invalid, fieldmark:step, fieldmark:submit and fieldmark:upload events; set event.detail.cancel = true in a fieldmark:submit listener to stop a submit. Add your own rule with Fieldmark.addValidator(name, fn). Advanced JSON on either component accepts the full config.
Good to know
The Fieldmark Worker (your own Cloudflare Worker for stored submissions, routing and private uploads) is in beta. Fieldmark needs a browser from 2023 or later; in Safari that means 16.4 or newer. The accessibility checks shown on the component while you edit are never shown to visitors.