Quiet Form · Docs
Setup guide, JSON config reference, provider setup and component options for QuietForm and QuietFormTrigger.
Quick start
Go to /quiet-form/builder. Configure your steps, fields, labels, colors and provider settings.
Click "Copy JSON" in the builder. This gives you the full config object ready to paste — no manual editing needed.
Insert QuietForm (inline) or QuietFormTrigger (sheet) from your component library onto your canvas.
Select the component, open the property panel, find Config JSON and paste your JSON. The form updates instantly on the canvas.
Make sure Demo mode is off and your endpoint is configured. Publish.
Components
Width property (280–960px)Config JSON reference
The config is a single JSON object with two top-level keys: settings and steps.
title — Form title displayed above the progress bar.
subtitle — Small text below the title (e.g. "We reply within 24h").
lang — Validation error language: en, fr, es, pt, it, de.
width — Form width in px (QuietForm only). Default: 480.
endpoint — Submission URL. Required for live forms.
provider — Form provider key (see Providers section).
providerFormId — Provider-specific access key (Web3Forms only).
next — "Continue" button label.
prev — "Back" button label.
submit — Final step submit button label.
success — Heading on the success screen.
successHelper — Sub-text on the success screen.
newMsg — "Send another message" button label on the success screen.
Array of step objects. Each step has:
title — Step heading.
description — Optional subtitle text below the heading.
fields — Array of field objects (see Fields section).
Field types
text Standard single-line text. Use for name, company, subject.
email
Text input with email format validation.
Shows error if value doesn't match x@x.x pattern.
tel Telephone input. Opens numeric keyboard on mobile.
number Numeric input. Use for budget, quantity, year.
textarea Multi-line text, 4 rows, vertically resizable. Use for message, description.
select
Custom dropdown with keyboard navigation (arrows, Enter, Escape).
Requires an options array: [{ label, value }].
Accessible with full ARIA roles.
All fields share: name (unique key, used as form data key),
label (displayed above the field),
placeholder,
helper (hint text shown below, hidden when error is active),
required (boolean — triggers validation on next/submit).
Validation
Validation runs when the user clicks Next or Submit. All fields on the current step are checked before moving forward. Invalid fields are marked and scrolled into view.
Once a field has been touched (blurred), it re-validates on input with a 1s debounce. Errors clear as soon as the value becomes valid.
Error messages follow the lang setting.
Supported: en, fr, es, pt, it, de.
Falls back to English if the language is not found.
Providers
formspree
Set endpoint to your Formspree URL
(e.g. https://formspree.io/f/yourformid).
Sends JSON with Content-Type: application/json.
web3forms
Set endpoint to https://api.web3forms.com/submit
and providerFormId to your access key.
Sends as FormData with the key appended automatically.
basin
Set endpoint to your Basin endpoint URL.
Sends JSON. No extra config needed.
formspark
Set endpoint to your Formspark URL
(e.g. https://submit.formspark.io/f/yourformid).
Sends JSON.
custom
Set any endpoint URL.
Quiet Form sends a POST with Content-Type: application/json
and a JSON body of all field values keyed by name.
Any non-2xx response triggers the error state.
Theme
All theme values are CSS color strings. The builder generates the full theme object. Here are the keys you're most likely to customize manually:
bg — Form backgroundsurface — Card/input backgroundborder — Input and card bordertext — Primary textmuted — Labels and secondary texterror — Validation error colorprogressOn — Active step dots and progress barprogressOff — Inactive step dotsnextBg / nextText — Next buttonsubmitBg / submitText — Submit buttonprevBg / prevText — Back buttondropdownBg — Dropdown backgrounddropdownHoverBg — Hovered option backgrounddropdownBorder — Open dropdown borderdropdownArrow — Arrow and selected option colorDemo mode
When Demo mode is enabled, submitting the form simulates an 800ms delay then shows the success screen — without hitting any endpoint. Use this for Framer marketplace previews or when testing the form UX on the canvas. Always disable Demo mode before publishing a live site.
QuietFormTrigger options
button — Styled button with background, border radius and shadow.
text — Plain text link, no background.
Use when you want to style the trigger through Framer's own controls.
4 options: message (chat bubble), mail (envelope),
spark (4-point star), arrow (right arrow).
Position can be left or right of the label. Gap between icon and label is configurable.
Sheet position: bottom-right, bottom-left, bottom-center.
Width: 300–680px. Border radius: 0–40px.
Closes on backdrop click, Escape key, or clicking the × button.
Scroll is locked on the body while the sheet is open.
Toggle backdrop on/off. When on: configurable color (default rgba(0,0,0,0.3))
and optional blur (backdrop-filter: blur(4px)).
Clicking the backdrop closes the sheet.
Need the component?
One-time purchase. Includes QuietForm, QuietFormTrigger and access to the visual builder.