splitforms.com
WEBFLOW · CONTACT FORM

Contact form for Webflow websites

Webflow's built-in forms cap free submissions and gate webhooks behind paid plans. Point your existing Form Block at the splitforms endpoint instead — same drag-and-drop designer, real backend, 1,000 submissions/month free, signed webhooks included.

1,000 free submissions every month.·No credit card.
contact.htmlhtml26 lines
01<!--
02 Webflow setup:
03 1. Add a Form Block to your page
04 2. Open the form's settings panel
05 3. Set Action to: https://splitforms.com/api/submit
06 4. Set Method to: POST
07 5. Add a hidden field named "access_key" with your key as the value
08 6. Optionally add a "redirect" hidden field for a thank-you page
09-->
10
11<form
12 action="https://splitforms.com/api/submit"
13 method="POST"
14>
15 <!-- These are added in the Webflow form-settings panel: -->
16 <!-- access_key (hidden) = YOUR_ACCESS_KEY -->
17 <!-- redirect (hidden, optional) = your thank-you URL -->
18
19 <input name="name" type="text" required />
20 <input name="email" type="email" required />
21 <textarea name="message" required></textarea>
22
23 <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
24
25 <input type="submit" value="Send" />
26</form>
1,000
submissions / mo, free
14ms
median latency, edge
0
lines of backend code
17+
frameworks supported
✶ Live preview

What your Webflow contact form actually looks like.

Drop-in form backend with spam filtering, signed webhooks, and a real submissions dashboard. The same code in this preview is what you copy into your Webflow project — no SDK, no plugin, no PHP.

  • 1,000 submissions per month, free forever
  • Honeypot + AI spam classifier on every plan
  • Signed webhooks to Slack, Discord, your server
Webflow contact form on Splitforms — drop-in form backend with spam filtering and webhooks
§ 01Setup3 steps · 60 seconds · zero config

Ship a Webflow contact form without a backend.

No SDK, no PHP, no plugin. Your form posts standard FormData to one URL — submissions land in your inbox.

STEP 01GENERATE

Get your free access key

Verify your email and your access key is generated instantly. Free for 1,000 submissions per month, forever.

Create your form

By signing up, you agree to our terms and privacy policy.

STEP 02EMBED

Drop in the Webflow code

Copy the Webflow snippet on the right and paste it into your project. Replace YOUR_ACCESS_KEY with the key from step 1.

snippethtml
<!--
…
STEP 03RECEIVE

Submissions land in your inbox

Hits your dashboard and email in seconds. Forward to Slack, Discord, Sheets, Notion, or any signed webhook URL.

inbox · 1 newjust now
FROM contact@yoursite.com
New Webflow form submission
Maya Iyer maya@studio71.co
Loved the new pricing page — quick question about the 4-year plan. Are usage limits per project or account-wide?
§ 02Live demosandboxed · no key required · no submission sent

Try it now — no signup, no key.

This is a styled HTML preview of what your Webflow form will look like. Submitting opens a confirmation, no real request is sent.

preview · webflowlocalhost:3000
✦ what just happened

Your Webflow form posts FormData to /api/submit. Splitforms validates the access key, runs the spam classifier, and forwards the parsed submission to your inbox plus the dashboard.

  • 14ms median round-trip from the edge.
  • Honeypot + classifier, no CAPTCHA.
  • Per-domain key locking out of the box.
REQUEST · POST /api/submit
{
  "access_key": "sk_live_4f9a_••••",
  "name":       "Maya Iyer",
  "email":      "maya@studio71.co",
  "message":    "…"
}
← 200 OK · { "success": true } · 14ms
§ 03Best practices5 rules · production-tested

How to ship this without regrets.

Five rules that make the difference between a form that works in the demo and a form that survives launch traffic.

  1. 01

    Use the native Form Block in Designer, not an embed. Embeds work but break Designer's preview rendering and lose drag-and-drop styling.

  2. 02

    Set the redirect field to a Webflow page slug like `/thanks`. Build the page in Designer, then it renders with your normal layout/header/footer — no separate template needed.

  3. 03

    Lock the access key to your published `.webflow.io` subdomain AND your custom domain in the splitforms dashboard. Webflow staging URLs are different from your live URL.

  4. 04

    Disable Webflow's CAPTCHA — the honeypot + classifier in splitforms covers spam without a CAPTCHA challenge that hurts conversion.

  5. 05

    If you have multiple forms (contact, newsletter, demo request), use a single access key and the splitforms dashboard's filter by form-name to organize. No need for separate keys per form.

§ 04Common gotchas in Webflow6 edge cases worth knowing

What bites people who skip the docs.

Worth a 60-second skim before you ship to production. Each one has caused a Webflow support ticket at least once.

⚠ gotcha

Webflow strips custom hidden inputs from native Form Blocks

If you add <input type="hidden" name="access_key"> directly in Designer's Form Block, Webflow ignores it on publish. Use the Form Block's settings panel: Form Settings → Form Name + add custom attribute. Or use an Embed element with raw HTML if you need full control.

⚠ gotcha

Default action URL gets reset on every Designer save

Setting the Action URL to https://splitforms.com/api/submit in the Form Block sometimes reverts to Webflow's default after a publish. The fix: lock it in by adding a custom attribute action to the form element (Settings → Element Settings → Custom Attribute).

⚠ gotcha

Method must be set to POST in the form's settings, not the URL

Webflow forms default to GET. Open the form's Settings panel, change Method to POST. If you forget, the submission posts your fields as URL query params — splitforms returns a 405 Method Not Allowed.

⚠ gotcha

Webflow's success/error elements still trigger on AJAX submit

Webflow auto-shows the .w-form-done div on a 2xx response. That's good — but if you also set up a redirect field in splitforms, the user sees the success message for ~80ms before the redirect fires. Either remove the success div or skip the redirect field.

⚠ gotcha

CAPTCHA conflict when Webflow's hCaptcha is enabled

If you've enabled Webflow's built-in hCaptcha for the form, Webflow blocks the submission client-side before splitforms is reached. Disable Webflow's CAPTCHA — splitforms has its own honeypot + classifier, no need for both.

⚠ gotcha

Webflow auto-injects an XMLHttpRequest interceptor that strips your access_key

Webflow's runtime (webflow.js) attaches a global submit listener that serializes form fields and POSTs them via XHR — and any field name it doesn't recognize from the Designer schema is dropped before the request leaves the browser. The access_key hidden input you added in an Embed often gets filtered. Workaround: instead of a hidden <input>, append the key to the form action URL as a query param (?access_key=…) or add wf-form to a class allowlist in the form's settings to let Webflow pass through unknown fields verbatim.

§ 04bNative Webflow forms…and where they break down

How Webflow handles forms without splitforms.

The shape of the problem before splitforms enters the picture — and the gap it fills for Webflow specifically.

Webflow's built-in Forms feature delivers submissions to your Webflow project dashboard and emails them — but the free Site plan caps submissions (50 per site, lifetime, on legacy plans) and webhooks are gated behind the Workspace plan ($24/mo+). Worse, the form fails silently if you exceed the cap: users see the 'success' state, your inbox gets nothing. There's no API to inspect submissions programmatically below the Workspace tier, and CMS-driven forms inherit the same caps. Native is fine for a personal portfolio with three submissions a year; for any real lead capture, you need an external endpoint. Splitforms is that endpoint without the plan upgrade.

§ 04cAlternative integration patterns2 ways to wire it

Two ways to ship splitforms on Webflow.

Pick the pattern that matches your constraints — JS budget, key-exposure tolerance, server-side opacity. Both produce the same result.

PATTERN A

Pattern A — native Form Block with overridden action URL

Use Webflow's drag-and-drop Form Block — keep the styling, structure, and Designer integration. In Form Settings, change Action to https://splitforms.com/api/submit and Method to POST. Add a hidden access_key field via the form's settings panel. Submissions skip Webflow's backend entirely.

pattern-a.htmlhtml8 lines
01<!-- After saving in Designer, the published HTML looks like: -->
02<form action="https://splitforms.com/api/submit" method="POST">
03 <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
04 <input type="text" name="name" required />
05 <input type="email" name="email" required />
06 <textarea name="message" required></textarea>
07 <input type="submit" value="Send" />
08</form>
PATTERN B

Pattern B — Embed element with raw HTML

If you need full control over markup (custom honeypot, file upload, multi-step), drop an Embed element on the canvas with raw HTML. Skips Webflow's form widget entirely. Useful for forms that don't fit the Designer's mental model.

pattern-b.htmlhtml8 lines
01<form action="https://splitforms.com/api/submit" method="POST">
02 <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
03 <input type="hidden" name="redirect" value="/thanks" />
04 <input name="email" type="email" required />
05 <textarea name="message" required></textarea>
06 <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
07 <button type="submit">Send</button>
08</form>
§ 04dDeployment notes for Webflowhosting · env vars · CSP

Shipping Webflow + splitforms to production.

Host-specific gotchas, env-var conventions, and the boring-but-load-bearing details for putting this on the public internet.

Webflow hosts your published site on its own CDN — there's no Vercel/Netlify config to worry about. The form posts cross-origin to splitforms regardless. Disable Webflow's built-in hCaptcha for the form (Form Settings → Spam Filter → Off) — it intercepts submissions client-side before splitforms is reached. Lock the splitforms access key to BOTH your *.webflow.io staging URL and your custom domain in the dashboard; Webflow serves both, with different Origin headers. Custom code embeds count toward Webflow's per-page code limit (10 KB) — keep raw-HTML Embed forms tight if you have multiple per page.

§ 05Comparisonvs native webflow

splitforms vs native webflow.

What you get for free vs what you build, pay for, or do without.

FeatureNative Webflowsplitforms
Free monthly submissions50 (Webflow Free) / 500 (CMS)1,000 (any Webflow plan)
Spam filteringhCaptcha (hurts conversion)Honeypot + classifier (invisible)
WebhooksWorkspace plan ($24/mo+)Free, signed payloads
Submission storageWebflow dashboardSplitforms dashboard + email
Custom redirect URLYes (form settings)Yes (hidden input)
Cost beyond limitPlan upgrade required$5/mo for 5,000 subs
§ 07Questions6 answered

Things developers ask before they integrate.

Direct answers, no marketing fluff. Missing one? Email hello@splitforms.com.

01How do I add a contact form to Webflow that doesn't count against my plan limit?
Open your Form Block in Designer, change the Action URL to https://splitforms.com/api/submit, set Method to POST, add a hidden field named access_key with your splitforms key. Submissions now go to splitforms (not Webflow), so they don't count against your Webflow plan limit.
02Does splitforms work with Webflow CMS Collection forms?
Yes. Use the same pattern — change the form's action URL and method. Splitforms doesn't care whether the form is on a static page or a CMS template; it processes the POST identically.
03How do I handle form errors in Webflow?
Webflow's .w-form-fail div automatically shows on a non-2xx response. Splitforms returns 4xx for spam/invalid keys with { message: "…" } — Webflow's default error styling will show it. Customize the .w-form-fail content in Designer.
04Can I use splitforms with Webflow Logic / Make.com workflows?
Yes — splitforms forwards every submission to a webhook URL (configure in dashboard → Webhooks). Point that at Make.com, Zapier, n8n, or your own endpoint. Payloads are HMAC-signed.
05How do I customize the success / redirect behavior?
Two options. (1) Use Webflow's built-in success state: leave the form action as splitforms, Webflow shows the .w-form-done div on success. (2) Add a hidden input <input name="redirect" value="/thanks"> — splitforms 302s the browser to that URL. Pick one, not both.
06What if the form is on a Webflow Editor-only page?
Editor-only pages have a slightly different DOM, but the form action override still works. Test in the published view — Editor preview won't actually submit.
✻ ✻ ✻

Ship your Webflow contact form in 60 seconds.

1,000 free submissions per month. No credit card. Lock the access key to your domains, paste the snippet, watch submissions land in your inbox.

Get free access key →Read the docs
v0.1 · founders pricing locked in · early access open