WebflowForms Documentation

Step-by-step guides, webhook API endpoints, and CRM integration tutorials for connecting Webflow forms without code or Zapier fees.

Getting Started

WebflowForms lets you connect Webflow forms to any CRM, email tool, or database — without exposing API keys in your client code. Here's how it works in 3 steps:

1

Purchase a connector

Browse our connectors catalog and buy the one you need ($19 / year). You'll receive instant access after payment.

2

Set up in the dashboard

Sign in to your WebflowForms dashboard. Add a Connection (paste your CRM credentials), then create a Form and map your fields.

3

Paste the Form Action URL into Webflow

Copy your generated Form Action URL (https://webflowforms.com/api/submit/...) and paste it into your Webflow Form Settings Action field with Method = POST. Submissions will flow to your CRM automatically.

Connect to Webflow

WebflowForms connects directly to native Webflow Form Blocks with zero layout changes. Combine Step 1 (Action URL) with Step 2 (AJAX Helper Script) for the best experience.

Method 1: Native Form Action URL (Zero-Code Setup)

1

Copy your Form Action URL

In your WebflowForms Dashboard under Forms, copy the Action URL generated for your form (e.g., https://webflowforms.com/api/submit/your-form-id).

2

Configure Webflow Form Settings

Select your native Webflow Form Block on the canvas. Open the Element Settings (D) panel on the right, paste your URL into the Action field, and set Method to POST. Publish and you're live!

Method 2: Native AJAX Helper Script (Keep .w-form-done States)

By default, Webflow performs a full-page browser POST when a custom Action URL is set. Add our ultra-lightweight 1.5KB wf.js helper so forms submit asynchronously via AJAX and trigger Webflow's built-in Success (.w-form-done) and Error (.w-form-fail) states without reloading the page.

1

Open Webflow Page or Site Custom Code

In Webflow Designer, open Page Settings (or Site Settings → Custom Code to enable site-wide) and scroll to the Before </body> tag section.

2

Paste the 1-Line Script Tag

Paste the following script snippet and save:

html
<!-- WebflowForms Native AJAX & File Upload Helper -->
<script src="https://webflowforms.com/wf.js" defer></script>
3

Customize Success, Error & Redirect Behavior

With wf.js installed, your form automatically displays your designed Webflow Success state on 200 OK, shows the Error state if an error occurs, or redirects to your custom Redirect URL if configured in the WebflowForms Dashboard.

That's it! wf.js automatically detects all forms pointing to /api/submit/... as well as any WebflowForms file upload embeds on your page.

Connect a CRM

After purchasing a connector, head to your dashboard to set up the connection. Each CRM requires different credentials — here's a guide for the most popular ones.

Klaviyo

Required: Private API Key + List ID

Where to find: Settings → API Keys → Create Private Key

Mailchimp

Required: API Key + Server Prefix + Audience ID

Where to find: Account → Extras → API Keys

HubSpot

Required: Private App Access Token

Where to find: Settings → Integrations → Private Apps → Create

Google Sheets

Required: Refresh Token + Spreadsheet ID

Where to find: OAuth2 flow — contact support for help

Slack

Required: Incoming Webhook URL

Where to find: Slack Apps → Incoming Webhooks → Add

Zapier

Required: Webhook URL

Where to find: Create Zap → Webhooks by Zapier → Catch Hook

💡 Tip: For all other connectors, the credential fields are labeled with exact instructions on where to find each value in your CRM settings.

File Uploads & Cloud Storage

WebflowForms supports native file uploads. When visitors submit files through your form, WebflowForms uploads them directly to your preferred cloud storage provider (Google Drive, AWS S3, or Supabase Storage) and routes the secure file URLs directly to your CRM properties.

1

Set up a Storage Connection

In your Dashboard, navigate to Connections, click **Add Connection**, and select Google Drive, AWS S3, or Supabase Storage. Enter your credentials to link the account securely.

2

Link Storage to your Form

Go to the Forms tab, click **Edit** on your form, select your storage connector from the **File Storage Connection** dropdown, and configure upload limitations (e.g. maximum file size).

3

Add the File Upload HTML Embed to your Webflow Form

Under your form's dashboard card, click Copy Webflow Embed Code. In Webflow Designer, drag an Embed element inside your native Form Block and paste the snippet:

html
<!-- WebflowForms File Upload Embed -->
<div class="wff-upload-box" data-wff-upload="YOUR_FORM_ID" data-field-name="file" data-max-size="25" style="border:1.5px dashed #cbd5e1;border-radius:10px;padding:16px;text-align:center;background:#f8fafc;margin-bottom:16px;">
  <input type="file" name="file" style="display:block;width:100%;font-size:13px;color:#334155;cursor:pointer;" />
  <div class="wff-upload-status" style="font-size:12px;color:#64748b;margin-top:6px;">Max file size: 25MB</div>
</div>
<script src="https://webflowforms.com/wf.js" defer></script>
4

Map to your CRM

Under Field Mapping, link your form's file field name to your target CRM contact or lead property. Submissions to your CRM will now contain the secure link to the uploaded file.

🔒 Security: All file uploads are streamed directly to your bucket through the server side, keeping your cloud keys completely hidden from client-side inspectors.

Field Mapping

Field mapping tells WebflowForms how to translate your Webflow form field names into CRM property names. For example:

Webflow form Field→Klaviyo Property
email→$email
name→$first_name
phone→$phone_number
company→$organization

In the dashboard, each form has a Field Mapping section with dropdown menus pre-populated with the CRM's accepted properties. Simply select the matching CRM field for each Webflow form field.

API Reference

If you want to integrate WebflowForms manually (without the Webflow form action), you can call our API directly.

POST/api/submit/{formId}

Submit form data to be routed to the connected CRM.

Headers

headers
Content-Type: application/json
Origin: https://your-webflow-site.com

Request Body

json
{
  "email": "user@example.com",
  "name": "Jane Doe",
  "phone": "+1234567890",
  "message": "I'd like to learn more"
}

Response (200 OK)

json
{
  "success": true,
  "id": "sub_abc123"
}

Error Response (429)

json
{
  "error": "Rate limit exceeded",
  "retryAfter": 60
}

Rate Limits: 10 requests per minute per IP. The X-RateLimit-Remaining header shows remaining requests.

FAQ & Troubleshooting

My form submissions aren't showing up in my CRM

Check the following: (1) Your Form Action URL (https://webflowforms.com/api/submit/...) is set with Method = POST in Webflow Form Settings, (2) Your CRM credentials are valid in the dashboard, (3) Your field mapping includes at least the email field. Check the Submissions tab in your dashboard for error logs.

Can I use WebflowForms with a custom domain?

Yes! Your 20 free sandbox trial submissions work on any staging or live domain automatically. When using an unlimited production license on a custom domain, activate your domain in Dashboard → Licenses.

What happens if a submission fails?

Failed submissions are logged in your dashboard with the exact API error message and you receive an instant email alert so no lead is ever lost.

Is there a submission limit?

No! All paid licenses (both single connectors and all-in-one bundles) include unlimited form submissions with zero overage charges.

Can I connect multiple CRMs to one form?

Currently each form connects to one primary CRM plus an optional Cloud Storage provider (S3, Google Drive, or Supabase Storage). For multi-destination fan-out, use our Zapier, Make, or n8n connectors.

How do I update my CRM credentials?

Go to Dashboard → Connections → click Edit on your connection → Update Credentials. Your existing forms will automatically use the new credentials.

Do you support Webflow's native form element and .w-form-done states?

Yes! Paste your Action URL into Webflow's native Form Block and add <script src="https://webflowforms.com/wf.js" defer></script> to keep your native .w-form-done and .w-form-fail states without page refresh.

Is my data secure?

Absolutely. All credentials are encrypted at rest. Your API keys never appear in client-side code — only your public Form ID is used in the Action URL. We use HTTPS for all data transmission.

Ready to Build?

Get your WebflowForms license in 30 seconds

Starting at just $1.58/mo ($19/yr) with unlimited submissions, zero exposed keys, and a 14-day money-back guarantee.

Get License — From $19/yr →Have custom questions? Contact us →