Loading tutorials…
Loading tutorials…
Webflow Forms work great until you realize submissions are going nowhere — notification email mis-configured, no CRM sync, no tracking event fired. This walks the full setup: form, redirect, tracking, and CRM integration.
Who this is forWebflow site owners running any form on a marketing site — contact, demo request, newsletter, lead capture. Especially urgent if you have noticed submissions seem 'low' for your traffic; usually means notifications are silently failing.
What you'll need
Step 1
Webflow form notifications are set per-form via the Settings panel. Defaults inherit from project but can be overridden. Always set explicitly.
In Webflow Designer, click any form on the page to select it.
Right sidebar → Form Settings → Send Email To. This is the per-form notification override.
If left blank, Webflow falls back to Project Settings → Forms → Send to email. If THAT is also blank or set to a dead inbox, notifications fail silently — Webflow stores the submission internally but never emails anyone.
Always set a per-form Send Email To explicitly. For shared-team setups, use a distribution alias (e.g., leads@yourcompany.com that forwards to the right people).
Also set "Email Subject" and "Reply To" — Reply To defaults to Webflow, which means replies to your form notifications go to Webflow, not the submitter. Set Reply To to bind to the form's email field.
Step 2
Form Settings → On Submit → Redirect to URL. Send to a dedicated /thank-you page. This is non-negotiable for tracking.
Webflow's default form-success behavior is to show a 'Thank you for submitting!' message on the same URL. That works for UX but BREAKS ad tracking — GA4 and Meta Pixel cannot distinguish a successful submit from a normal page view, so they never fire conversion events.
Fix: Form Settings → On Submit → Redirect to URL. Create a new page at /thank-you (or /thanks, or per-form variants like /demo-thank-you).
On the /thank-you page, add Page Settings → Custom Code → Inside <head> tag: <script>fbq("track", "Lead"); gtag("event", "form_submit", {form_name: "contact"});</script>
Now every successful form submit redirects to a URL that fires tracking exactly once per submit. Pixel and GA4 both see the conversion cleanly.
NOINDEX the /thank-you page (Page Settings → SEO → Exclude from search). You do not want it ranking in Google.
Per-form variants: if you have 5 forms, use 5 thank-you pages (/demo-thank-you, /contact-thank-you, /newsletter-thank-you). Each fires its own tracking event with form_name distinguishing them.
Step 3
On each /thank-you page, paste Custom Code that fires fbq("track", "Lead") and gtag("event", "form_submit", {...}). If using GTM, use a Page View trigger filtered to /thank-you paths.
Page Settings → Custom Code → Inside <head> tag. Paste the tracking events.
For non-GTM setups: <script>fbq("track", "Lead", {value: 0, currency: "USD"}); gtag("event", "generate_lead", {form_name: "demo-request", value: 0, currency: "USD"});</script>
For GTM setups: do nothing on the page — instead, create a GTM trigger that fires on Page View where URL Path contains /thank-you. The trigger fires Meta Pixel Lead and GA4 generate_lead tags.
Mark generate_lead (or your custom name) as a Key Event in GA4 → Admin → Events.
Import the Key Event into Google Ads → Goals → Conversions if you run Search/Display.
Verify by submitting a real form in incognito, watching the redirect to /thank-you, and confirming the event fires in GA4 DebugView and Meta Pixel Helper.
Step 4
Three paths: (1) native Webflow Apps integration for HubSpot/Klaviyo, (2) Zapier middleware, (3) custom JavaScript that POSTs the form data to the CRM API.
Option A — Native Webflow App (recommended for HubSpot, Klaviyo, ActiveCampaign, ConvertKit): Webflow Designer → Apps panel (left sidebar) → Browse → search "HubSpot" or "Klaviyo." Install the app. Authorize. On any form, the Settings panel now has a new section to map Webflow fields to CRM properties.
Option B — Zapier: cheaper if you only have 1-2 forms, slower (30s-2min latency). Zapier → Create Zap → Trigger: Webflow → New Form Submission → connect Webflow → pick the form. Action: HubSpot/Klaviyo/Salesforce → Create or Update Contact. Map fields.
Option C — Custom JavaScript (Webflow form intercept): on form-submit, prevent the default Webflow handler, POST the data to the CRM API yourself, then redirect to /thank-you. Most control, most effort. Use only when native + Zapier are insufficient.
Whichever path: ALWAYS test with a real submission and verify the contact appears in the CRM within 5 minutes. CRM sync failures are the #1 reason leads silently disappear.
Step 5
Webflow has built-in reCAPTCHA v3 (Site Settings → Forms → reCAPTCHA). Toggle on. Add hCaptcha as a stronger alternative if spam continues.
Webflow Dashboard → your project → Site Settings → Forms tab.
Scroll to reCAPTCHA. Webflow uses Google reCAPTCHA v3 (invisible, no user interaction). Toggle ON.
Click "Enable reCAPTCHA" — Webflow generates a Site Key for you. No need to register at Google manually.
For higher spam volumes (consumer-facing forms, free-trial signups): add hCaptcha via Custom Code. Webflow does not have native hCaptcha, but you can paste the hCaptcha widget script into the form section via Embed Block.
After enabling, submit one real form to confirm it still works — overly aggressive reCAPTCHA settings have been known to block real users.
Step 6
Webflow stores every form submission in Project Settings → Forms → Form Submissions. This is your backup if notifications or CRM sync fail.
Webflow Dashboard → your project → Forms tab → Form Submissions.
Every submission is logged here, regardless of whether the email notification or CRM sync succeeded. This is the source of truth.
Periodically export submissions to CSV (Forms tab → Export). Match against your CRM count. Discrepancy = silent failure somewhere.
Set up a weekly calendar reminder to check: (a) submissions count matches CRM contact creation count for the week; (b) notification emails are arriving in the inbox you specified; (c) no Apps integrations show as Disconnected.
Webflow stores submissions for the life of the project — there is no auto-deletion. But the export is the only way to do downstream analysis.
Step 7
Open the form in incognito, fill it with test data, submit. Verify: redirect, tracking events, notification email, CRM contact creation, form submissions log.
Open an incognito window. Visit the form page on your live custom domain.
Fill the form with realistic test data (firstname: Test, lastname: SubmitDate, email: test+formname@yourdomain.com — the + alias helps filter test contacts later).
Submit. Confirm: (a) you are redirected to /thank-you, (b) GA4 DebugView shows the form_submit/generate_lead event, (c) Meta Pixel Helper shows Lead event firing, (d) within 60 seconds, the notification email arrives in the configured inbox, (e) within 2 minutes, the contact appears in HubSpot/Klaviyo/Zapier, (f) the submission appears in Webflow Forms → Form Submissions.
All 6 checks pass = ship it.
Any one fails = debug now, not later. The most common single-point-of-failure is the redirect step — Form Settings → On Submit → Redirect to URL was left as default 'Show success message' on at least one form on the site.
Common mistakes
Notification email set to a dead inbox (or default Webflow project creator)
What goes wrong: Submissions silently go to an inbox no one checks. Leads pile up in Webflow's Form Submissions panel but no one ever sees them. We have seen 100+ leads lost over 6 months from this single mis-configuration.
How to avoid: Set per-form 'Send Email To' explicitly. Use a distribution alias (leads@yourcompany.com) that survives team turnover. Audit every form on the project, not just the latest one.
Leaving the default success-message behavior instead of redirecting to /thank-you
What goes wrong: Form submissions still arrive at the inbox, but no tracking events fire. GA4 sees zero conversions. Meta Pixel sees zero leads. Google Ads and Meta Ads optimize against zero conversion data — campaigns underperform 30-50%.
How to avoid: Form Settings → On Submit → Redirect to URL → set to a dedicated /thank-you page. Fire tracking events on the thank-you page via Custom Code.
No CRM sync, only relying on Webflow email notifications
What goes wrong: Leads live in inbox replies and never make it to a structured pipeline. Sales follow-up is ad-hoc. Lead-to-customer conversion data is impossible to attribute back to channels. Reporting is broken.
How to avoid: Install the native HubSpot or Klaviyo Webflow App for instant sync. For other CRMs, set up Zapier as the bridge. Verify with a test submission monthly.
Not NOINDEXing the /thank-you page
What goes wrong: The /thank-you page accidentally ranks in Google for branded queries. Real users land on /thank-you, see 'Thanks for submitting!', and bounce. Brand-search CTR drops.
How to avoid: Page Settings → SEO Settings → Exclude from search engines → toggle ON. Re-publish. Verify View Source on /thank-you shows <meta name="robots" content="noindex">.
Webflow Apps integration silently disconnects after token expiry
What goes wrong: HubSpot/Klaviyo auth tokens in Webflow Apps expire after 6-12 months. When the token expires, form submissions stop syncing to CRM but Webflow does not alert you. Leads disappear silently again.
How to avoid: Monthly calendar reminder: submit one test form. Verify the contact appears in CRM within 2 minutes. If not, re-authorize the Webflow App.
reCAPTCHA not enabled — site collecting 80% spam submissions
What goes wrong: Without spam protection, public forms collect spam submissions at 5-50/day. Your CRM fills with junk. Real leads get lost in the noise. Sales team stops checking the form-submission alerts.
How to avoid: Site Settings → Forms → reCAPTCHA → toggle ON. Free, no setup beyond the toggle. Test that real submissions still go through (rarely an issue on v3 invisible reCAPTCHA).
Recap
Done — what's next
How to install Google Analytics 4 on a Webflow site
Read the next tutorial
Hand it off
Form setup on Webflow is deceptively simple. Form setup with notification reliability + CRM sync + ad-platform conversion tracking + spam protection is a 3-hour project — and missing any one of those means leads silently disappear or campaigns underperform. A vetted Webflow specialist sets up the full stack across all forms on the site in one afternoon, typically $80-160 at $14-16/hr.
See specialist rates
Depends on the Site plan: Free Starter = 50 total submissions (across all forms on the project), Basic = 500/mo, CMS = 1000/mo, Business = 2500/mo, Enterprise = unlimited. Exceeding the cap means new submissions are rejected — not stored, not emailed, not synced. If you are growing, monitor Project Settings → Forms → Submissions count.
Yes. Form Settings → Send Email To accepts a comma-separated list (max 5 addresses). Better practice: use a single distribution alias (leads@yourcompany.com) that forwards inside your email server. Easier to manage and survives team changes.
Native Webflow Forms have no conditional logic. Workarounds: (1) use Webflow Logic (the no-code workflow product) to route submissions based on field values; (2) use a third-party form embed like Typeform, Tally, or Formspree that has conditional logic; (3) write custom JavaScript that shows/hides Webflow elements based on input events.
Top causes in priority order: (1) HubSpot Webflow App auth expired — re-authorize in Webflow Apps; (2) field mapping is wrong — Webflow field names changed and the App did not auto-update; (3) HubSpot rate-limit hit; (4) HubSpot contact-create failing because required HubSpot properties are not mapped from Webflow.
Use per-form thank-you pages (e.g., /demo-thank-you, /contact-thank-you, /newsletter-thank-you). On each, fire gtag('event', 'generate_lead', {form_name: 'demo-request'}) with a unique form_name parameter. In GA4 → Events, you can filter by form_name. Alternative: push form_submit + form_name to dataLayer via a GTM trigger.
Webflow Forms work for 80% of use cases — simple contact, newsletter, lead capture, demo request. Use third-party forms when you need: conditional logic, multi-step wizards with branching, calculated fields, payment integration in the form itself, or HIPAA-compliant submissions. Embedded forms break native Webflow tracking — you'll need to add tracking inside the third-party form's settings.
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.
Webflow
Webflow has no server-side hook, which means the Meta Pixel alone misses 20-40% of conversions on iOS. This walks through the Pixel install AND the three legitimate Conversions API workarounds for Webflow — Zapier, Stape, or HubSpot-as-middleware.
Webflow
GTM is the right move once you are running 2+ marketing pixels. The wrinkle on Webflow: GTM needs both a Head snippet AND a body-open snippet — and Webflow only gives you one body-end slot. Here is the workaround that ships clean.
Webflow
DIY Webflow is great for the first 6 months — the visual editor really is that good. After that, the math usually flips. This is the honest framework: when self-managing costs more than hiring help.