Connect Framer Forms to FormsReach

Set up FormsReach with Framer

Design your site in Framer

Build your Framer page as usual. Leave room for a contact form where leads should convert.

Framer canvas with a website design ready for a contact form

Open the FormsReach plugin

In Framer, open the FormsReach plugin from the browser or plugin panel so you can attach a form without leaving the canvas.

Opening the FormsReach plugin from Framer

Review the plugin panel

Confirm you see the FormsReach form setup UI. From here you connect an account, create a form, and paste credentials.

Create a form after sign-in

FormsReach form creation screen after login

Copy your API key

Copy the form public API key from the onboarding dialog or form overview.

FormsReach onboarding dialog showing the form API key

Paste the key in Framer

Return to the FormsReach plugin in Framer and paste the API key into the key field so the form posts to your FormsReach endpoint.

Pasting the FormsReach API key into the Framer plugin

Confirm the key in Framer

Save or apply the key in the plugin window. The form on the canvas should now target your FormsReach form.

Updating and confirming the API key in the Framer plugin window

Publish and copy your domain

Publish the Framer site, then copy the live host (for example yoursite.framer.website or your custom domain). Canvas preview origin can differ from production.

Publishing the Framer site and reading the public domain

Allow the domain in FormsReach

In FormsReach, open Allowed domains for the form and add the published host. Without it, browser submissions from production are rejected. Optionally configure Channels for email (WhatsApp on Pro and Agency).

Adding the Framer published domain to FormsReach allowed domains

Platform notes

Prefer the FormsReach plugin so the API key and form stay linked to the canvas component.
Keep name attributes on every field you want in the notification payload.
Publish before testing delivery. Canvas preview can differ from the live site origin.
After publish, confirm the live host is on the form allowed domains list.

Troubleshooting

Domain not allowed: Add the exact published host (and custom domain if you use one) under Allowed domains, then retry.
Key not accepted: Re-copy the form public API key from FormsReach and paste it again in the plugin.
Nothing arrives: Confirm the key is saved in Framer, channels are enabled, and you submitted on the published URL, not only the canvas.
Styling fights the form: Wrap the form in a Framer stack or frame and constrain width rather than rewriting every input on the canvas.

What you get

Free

500 credits every month for form submissions, email, and WhatsApp. Spam filtering, webhooks, and workflow rules included. No credit card required.

Starter & Pro

Larger monthly credit pools (2,000 or 8,000) for growing sites and multi-site volume. Same channels - email, WhatsApp via the official Meta API, webhooks. See pricing.

FAQ

Why do I need an allowed domain?+

The form API key is public by design for HTML embeds. Allowed domains restrict which hosts can submit. Add every production host you publish in Framer, including custom domains.

Does Framer need a custom backend for contact forms?+

No for this path. FormsReach is the form backend. The Framer plugin and form markup POST to our endpoint with your key and a whitelisted domain.

Can I style the form in Framer?+

Yes. Style wrapper frames in Framer and use CSS classes on the form, or keep the form minimal and style around it.

Free vs paid delivery?+

Email, webhooks, and workflow rules are available on Free and Starter with monthly credits. WhatsApp via Meta WhatsApp Business API is available on Pro and Agency.

What if I prefer raw HTML instead of the plugin?+

You can still paste an HTML form with method POST, the FormsReach submit URL, and a hidden api_key field into a Code or Embed component. The plugin is the guided path shown in the screenshots.