Replies within 24h
Quiet Form · Docs
Setup guide, JSON config reference, provider setup and component options for QuietForm.
Quick start
Go to /quiet-form/builder. Configure your steps, fields, labels, colors and provider settings.
Click "Copy config" in the builder. This gives you the full config object ready to paste — no manual editing needed.
Insert QuietForm (inline or sheet) from your component library onto your canvas.
Select the component, open the property panel. Set Mode toInline (embedded in layout) or Trigger (floating sheet). Paste your JSON into Config JSON.
Make sure Demo mode is off and your endpoint is configured. Publish.
Component
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
textStandard single-line text. Use for name, company, subject.
emailText input with email format validation. Shows error if value doesn't match x@x.x pattern.
telTelephone input. Opens numeric keyboard on mobile.
numberNumeric input. Use for budget, quantity, year.
textareaMulti-line text, 4 rows, vertically resizable. Use for message, description.
selectCustom 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
formspreeSet endpoint to your Formspree URL (e.g. https://formspree.io/f/yourformid). Sends JSON with Content-Type: application/json.
web3formsSet endpoint to https://api.web3forms.com/submitand providerFormId to your access key. Sends as FormData with the key appended automatically.
basinSet endpoint to your Basin endpoint URL. Sends JSON. No extra config needed.
formsparkSet endpoint to your Formspark URL (e.g. https://submit.formspark.io/f/yourformid). Sends JSON.
customSet any endpoint URL. Quiet Form sends a POST with Content-Type: application/jsonand 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.
Trigger Mode 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. One file — QuietForm with inline and trigger modes. Visual builder included.