Loading tutorials…
Loading tutorials…
Framer's native form is easy to design and easy to misconfigure. Most DIY setups capture leads to the Framer CMS and never route them to email, CRM, or Slack — so leads pile up in a dashboard nobody checks. This walks the full integration path.
Who this is forFramer site owners running a contact, demo-request, or newsletter form who need leads to actually reach the team. If you're losing leads because they sit in Framer Collections, this is the fix.
What you'll need
Step 1
Insert → Form. Use Framer's native form component, not a third-party embed. Add validation on every field.
Open the page → Insert → Form. Framer adds a default form with Name, Email, Message.
Click each field → right panel → set 'Required' for fields you actually need. Don't make every field required — every extra required field drops conversion 5-10%.
Set field types: Email field → type "email" (enforces email format validation). Phone → type "tel." URL → type "url."
Add a hidden field for "Source" or "UTM Campaign" if you want to track where leads came from. Hidden fields are bound to URL query params automatically.
Style the submit button with hover/disabled states. A button that doesn't visibly change on submit makes users hit it twice — duplicate leads.
Add a success message that replaces the form on submit. "Thanks — we'll be in touch within 24 hours." Sets expectation correctly.
Step 2
Form properties → Form Action. Choose Webhook (most flexible) or Collection (storage-only). Add additional destinations from the integrations menu.
Click the form → right panel → Form Action section.
For maximum flexibility, choose "Webhook" and connect to Zapier or Make. This lets you route the same submission to 5+ destinations.
Alternative: "Collection" stores submissions in a Framer CMS collection (good for backup, bad as the only destination — Framer doesn't notify you of new entries).
Native integrations available: Mailchimp, HubSpot (limited), ConvertKit, Notion. Pick if you only need one destination.
For a multi-destination setup: Webhook → Zapier → fan out to Email + CRM + Slack. This is the pattern most teams converge on.
Step 3
Create a Zapier zap triggered by the Framer webhook. Add 3-5 actions: email notify, CRM contact create, Slack alert.
In Zapier, create a new Zap. Trigger: "Webhooks by Zapier" → "Catch Hook." Zapier gives you a webhook URL — copy it.
Back in Framer: Form Action → Webhook URL → paste the Zapier URL. Save.
Submit a test entry on the form. Back in Zapier, click 'Test trigger' — your test submission should appear with all fields.
Add Action 1: Email by Zapier → send notification to your inbox. Subject: "New Framer lead: {Name}." Body includes all fields.
Add Action 2: CRM (HubSpot, Pipedrive, etc.) → Create Contact / Create Deal. Map Framer fields to CRM fields.
Add Action 3: Slack → send message to #leads channel with name, email, and a link to the new CRM record.
Turn the Zap on. Submit a real test through the live form. Verify all 3 destinations receive the lead within 60 seconds.
Step 4
Even with Zapier routing, also send submissions to a Framer Collection as a fallback for the day Zapier breaks.
In the Form Action panel, enable BOTH Webhook AND Collection (Framer allows both).
Choose or create a CMS collection for submissions (call it "Form Submissions"). Map form fields to collection fields.
New form submissions now save to Framer CMS AND fire the webhook. If Zapier goes down or hits task limits, you still have the data.
Check the Collection weekly for the first month — verify count matches what reached Zapier. If counts diverge, the webhook is failing silently.
Step 5
Without spam protection, expect 5-50 spam submissions per day. They burn Zapier tasks and pollute CRM.
Form properties → enable "reCAPTCHA" or "hCAPTCHA" if available on your Framer plan.
Alternative: add a hidden honeypot field. Name it "website" (bots fill it, humans don't). In Zapier, add a filter step: "Continue only if [website field] is empty."
Time-based check: add a hidden field with the page load timestamp. If form submits in under 2 seconds, it's a bot — filter out in Zapier.
Test by submitting your form with the honeypot filled — should not fire the Zap. Submit normally — should fire.
Step 6
Submit a real lead. Confirm it reaches every destination within 60 seconds. Set up Zapier error notifications.
Submit a real form with realistic data (use your own email and a personal phone).
Within 60 seconds: confirm email arrived. Confirm CRM record created. Confirm Slack notification fired. Confirm Framer Collection has the entry.
In Zapier: Account settings → Notifications → enable "Email me when a Zap has errors." This is critical — Zapier errors fail silently otherwise.
Set a monthly calendar reminder to test the form. Form integrations break — Zapier connections expire, CRM API changes, webhook URLs get rotated. Catch failures in the test, not in lost leads.
Common mistakes
Submitting to Framer Collection only
What goes wrong: Leads pile up in a Framer Collection that nobody checks. Email + CRM + Slack remain empty. Sales team has no idea inbound exists. Losing 30-90% of pipeline.
How to avoid: Always route to at least 2 destinations: email AND CRM. Framer Collection as backup, never as primary.
No spam protection
What goes wrong: Form gets 20-100 spam submissions per day. Burns Zapier tasks, fills CRM with junk, triggers Slack alerts at 3am. Team eventually stops trusting form notifications entirely.
How to avoid: Add reCAPTCHA OR honeypot field with Zapier filter. Verify by trying to submit fake spam yourself.
No Zapier error monitoring
What goes wrong: Zapier hits task limit on the 15th of the month. Forms continue to submit but go nowhere for 15 days. Team loses 20-50 leads. Discovers it through a customer asking 'did you get my message?'
How to avoid: Zapier Account settings → Notifications → email on errors. Upgrade to Professional plan ($49/mo) before launch if expecting 100+ submissions/month.
Too many required fields
What goes wrong: Form has 8 required fields. Conversion drops 40% vs a 3-field form. You're trading lead quality for lead volume — and you weren't actually using the extra fields anyway.
How to avoid: Required fields only: Name, Email, and ONE qualifying question. Everything else optional or moved to follow-up.
No success message after submit
What goes wrong: User submits, page does nothing visible. User thinks form is broken, submits again. Now you have 2 leads for 1 person, or they bounce and never return.
How to avoid: Add a success state that replaces the form. "Thanks — we'll be in touch within 24 hours." Optionally redirect to a thank-you page for conversion tracking.
Recap
Done — what's next
How to set up a Framer site end-to-end
Read the next tutorial
Hand it off
Form integrations break. Zapier limits get hit. CRM APIs change. A specialist who monitors and maintains the lead-routing layer typically runs $100-300/mo for ongoing maintenance — usually pays for itself in one prevented lead-loss incident.
See specialist rates
Framer has a native HubSpot integration on Pro plan and above. For Pipedrive, you need Zapier or Make as the middleman. The native HubSpot integration is fine for simple field mapping but doesn't handle conditional routing — for anything beyond 'create contact,' use Zapier.
Add a hidden field called 'Page URL' or 'Source.' In Framer, hidden fields can be bound to dynamic values — bind to the current page URL. The value carries through to Zapier and into your CRM record.
Each Zap step counts as a task. A submission with 4 actions (email, CRM, Slack, filter) = 4 tasks. So 100 form submissions = 400 tasks. Plan capacity accordingly. Make.com is cheaper at scale because it bills per 'operation' (similar concept but more granular).
Framer's uptime is 99.9%+ — actual outages are rare. If one happens, the form HTML still renders (it's static), but the JavaScript that handles submission may fail. Submissions during outage are lost. Critical-pipeline forms should have a fallback (a tel: link, Calendly embed, or alternate landing page).
Use Framer's native form for: simple contact, demo request, newsletter signup. Use Typeform for: multi-step surveys, branching logic, NPS. Use HubSpot Forms for: anything where HubSpot is the system of record (deeper field mapping than Zapier offers). Don't mix — pick one form pattern per page and stick to it.
Framer
Framer feels like Figma until you hit publish — then it suddenly behaves like a real CMS. This walks the path from empty project to a live custom domain, including the breakpoint and domain-connect steps that trip up most first-time builders.
Framer
Framer doesn't have a native GA4 field — every install goes through Custom Code. Half of DIY Framer GA4 installs end up double-counting from the .framer.app staging subdomain or missing form-submit events entirely. This walks the full install.
Framer
Framer is gorgeous and accessible — until you hit the wall where every change costs you a day. This is the honest framework: when the time cost of DIY exceeds the cost of hiring, and how to tell which side you're on.
Webflow
Webflow doesn't have a native GA4 field anymore — every install goes through Custom Code. Most DIY setups end up double-counting from the webflow.io staging subdomain or missing events from form submits. This walks the install + the filters that fix both.