Webflow makes form design easy. Native notifications still land in email, and plan limits on form submissions are a common reason teams look for a Webflow form to WhatsApp path. This guide shows how to get Webflow form submissions on WhatsApp by pointing the Form element at a form API endpoint, without Zapier, Webflow Logic, or a custom server.
You keep the same Designer form. Delivery moves to FormsReach: spam filtering, monthly credits, email on Free, and WhatsApp on Pro and Agency via Meta’s WhatsApp Business API.
What you’ll need
- A Webflow site with a Form element (or room for an Embed)
- Ability to set form action, method, and a hidden field
- A free FormsReach API key
Optional later: WhatsApp delivery on Pro or Agency after the form works on email.
Why native Webflow form email is not enough
Webflow’s built-in form handling is fine for low volume and inbox workflows. Teams outgrow it when:
- Sales lives on WhatsApp. Email open rates lag; the first reply usually wins the lead.
- You want a backend you control. Hosting stays on Webflow; the POST target should not lock you to one host’s notification product.
- Zapier or Logic for one form is heavy. A form API is one action URL plus a key.
A form API is a shared POST endpoint: the browser posts field data to https://api.formsreach.com/submit with your api_key. The service stores the submission, filters spam, and notifies you. Background: send form submissions to WhatsApp.
Step 1: Create a FormsReach API key
- Sign up or log in at app.formsreach.com.
- Create a form (or open an existing one).
- Copy the public form API key.
Free includes 500 credits/month for accepted submissions, email notifications, free webhooks, and workflow rules. You do not need WhatsApp to validate the Webflow wiring.
Step 2: Set the form action in Webflow Designer
- Open your site in Webflow Designer.
- Select the Form element (not only an inner field).
- In form settings, set:
- Action:
https://api.formsreach.com/submit - Method:
POST
- Action:
- Add a Hidden field:
- Name:
api_key - Value: your FormsReach key (replace
YOUR_API_KEY)
- Name:
Use real field name attributes for anything you want in the notification. The standard set works out of the box:
| Field name | Type | Role |
|---|---|---|
api_key |
hidden | Routes the submission to your account |
name |
text | Lead name |
email |
Reply address | |
message |
textarea | Enquiry body |
Keep labels and Webflow classes as you like. Only name attributes and the action URL matter for delivery.
Step 3: Match the HTML path (optional Embed)
If you prefer a full snippet inside an Embed element, use the same markup as any static form. This is the canonical FormsReach HTML form:
<form action="https://api.formsreach.com/submit" method="POST">
<input type="hidden" name="api_key" value="YOUR_API_KEY" />
<input type="text" name="name" required />
<input type="email" name="email" required />
<textarea name="message" required></textarea>
<button type="submit">Submit Form</button>
</form>Style with Webflow classes around the Embed if needed. Do not leave the form on the default Webflow-only action if you want FormsReach delivery.
For pure static HTML outside Webflow, see contact form on a static website without a backend.
Step 4: Publish and allow your domain
- Publish the site (Designer preview is not enough for a real domain check).
- In FormsReach, open the form’s Allowed domains and add the live host (custom domain and/or
*.webflow.iostaging if you test there). - Submit the form once yourself.
Confirm the submission appears in the FormsReach dashboard, then check email (and WhatsApp if enabled).
Step 5: Email first, WhatsApp when ready
Credits meter usage. A typical path is 1 credit for an accepted submission and 1 credit for an email notification. Webhooks cost 0 credits on every plan.
WhatsApp uses the official Meta WhatsApp Business API on Pro and Agency only. In the dashboard, add a phone number, complete the one-time OTP, and enable the channel. You do not rewrite the Webflow form when you turn WhatsApp on.
Comparing form backends on price and channels? See Web3Forms alternatives in 2026.
Webflow-hosted vs exported sites
| Setup | What to do |
|---|---|
| Webflow hosting | Custom form action + hidden api_key; allow the published domain |
| Exported static site | Same HTML/action pattern; host anywhere (Netlify, Cloudflare Pages, etc.) |
| Client-side JS only | Prefer the official @formsreach/js pattern on exported sites if you need fetch instead of a full navigation |
Webflow form notifications and FormsReach can both fire if something is still wired to the native handler. Prefer a single clear action URL so you know where each lead goes.
Troubleshooting
Form still only hits Webflow email
Confirm the Form element’s action is https://api.formsreach.com/submit and method is POST. Republish after changes.
4xx or empty dashboard
Check the hidden field is named exactly api_key. Inspect Network for the POST to api.formsreach.com. Domain allowlisting blocks unknown hosts.
Works in Designer, fails on live
Always retest on the published URL. Add both custom domain and staging host if you use both.
Missing fields in the notification
Webflow labels are not field names. Set each input’s Name attribute (name, email, message).
Need SPA behavior without page reload
Export or embed with @formsreach/js and data-formsreach, or use React on a custom stack: React contact form without a backend.
Ship Webflow forms without a backend or Zapier
A Webflow form to WhatsApp setup is one POST target, a hidden API key, and domain allowlisting. FormsReach gives you that endpoint, spam filtering, email on Free (500 credits/month), free webhooks, and WhatsApp on Pro and Agency through Meta’s Business API. No Logic automation required for basic delivery.
Building the same idea in Framer? Use the Framer contact form guide.