Introduction

If you've ever wished your Webflow site could automatically talk to your CRM, send Slack alerts on form submissions, or sync CMS updates to an external database — webhooks are exactly what you need.

Most Webflow users know about native integrations and Zapier automations. But very few understand how the underlying webhook mechanism works, which means they hit walls when those no-code tools don't go far enough.

At TweakDesigns, we've built 200+ Webflow sites over 9 years. We've wired up webhooks for e-commerce brands, SaaS landing pages, lead generation portals, and content-heavy CMS sites. This guide is everything we wish had existed when we started.

By the end, you'll know exactly what a webhook is, how it differs from an API, how to set one up in Webflow, and how to connect it to Zapier, Airtable, and your CMS — with practical steps you can follow right now.

What Is a Webhook? (And What Does "Webhook" Actually Mean?)

A webhook is an HTTP callback — a way for one app to automatically notify another app when something happens.

Think of it like this: instead of your app checking every 5 minutes "did anything change?" (that's polling), a webhook says "I'll call you the moment something happens." It's reactive, not repetitive.

The term webhook was coined by Jeff Lindsay in 2007. It combines "web" (HTTP-based) and "hook" (a software trigger that intercepts an event). When people search for webhook meaning, this is the short answer: an event-driven HTTP notification.

A webhook URL is the destination endpoint — the address of the app that will receive the notification. When you set up a webhook, you provide this URL so the source app knows where to send data.

Webhook vs API: What's the Difference?

This is one of the most searched questions around webhooks, and rightfully so — the two are related but work very differently.

Analogy: An API is like calling a restaurant to check if your table is ready. A webhook is the restaurant texting you automatically when it is.

In the context of Webflow:

• The Webflow API lets you read and write data — fetch CMS items, create orders, update members.

• Webflow webhooks notify your external app when something happens — a form is submitted, a CMS item is published, an order is placed.

You'll often use both together. Webflow fires a webhook → your server receives the event → your server calls the Webflow API to fetch more details.

Webflow Webhooks: What Events Can You Listen To?

Webflow supports webhooks for the following events (as of 2026):

• form_submission — triggered when a visitor submits a Webflow form

• site_publish — triggered when you publish your Webflow site

• ecomm_new_order — triggered when a new e-commerce order is placed

• ecomm_order_changed — triggered when an order status changes

• ecomm_inventory_changed — triggered when product inventory changes

• collection_item_created — triggered when a new CMS item is created

• collection_item_changed — triggered when a CMS item is updated

• collection_item_deleted — triggered when a CMS item is deleted

• memberships_user_account_added — triggered when a new member signs up

• memberships_user_account_updated — triggered when member details change

Each of these fires an HTTP POST request to your specified webhook URL, carrying a JSON payload with all the relevant data.

How to Set Up a Webflow Webhook (Step by Step)

Via Webflow Project Settings

This is the simplest way — no code required.

1. Open your Webflow project and go to Project Settings

2. Click the Integrations tab

3. Scroll down to the Webhooks section

4. Click + Add Webhook

5. Choose the trigger event from the dropdown (e.g. form_submission)

6. Paste your webhook URL (the endpoint of the app that will receive data)

7. Click Save

Via the Webflow API

For developers or agencies managing multiple sites programmatically, you can create webhooks via the Webflow REST API:

http

https://api.webflow.com/sites/{site_id}/webhooks
Authorization: Bearer YOUR_API_TOKEN
Content-Type: application/json

{
  "triggerType": "form_submission",
  "url": "https://your-endpoint.com/webhook"
}

This is especially useful when building client site templates or automating site setup at scale.

Webflow Form Webhook: Capture Every Submission Instantly

The most common use case we handle at TweakDesigns is connecting Webflow form submissions to external tools — CRMs, databases, Slack, email sequences, or spreadsheets.

What the Form Submission Payload Looks Like

When a visitor submits a Webflow form, your webhook endpoint receives a POST request with a body like this:

json

{
  "triggerType": "form_submission",
  "payload": {
    "name": "Contact Form",
    "site": { "id": "abc123", "name": "My Site" },
    "submittedAt": "2025-04-10T09:32:11Z",
    "formData": {
      "Name": "Priya Mehta",
      "Email": "priya@example.com",
      "Message": "I'd like to discuss a project."
    }
  }
}

The formData object contains all the field values exactly as submitted.

Setting Up a Webflow Form Webhook

1. In Project Settings → Integrations → Webhooks, add a new webhook

2. Set trigger to form_submission

3. Add your endpoint URL (Zapier, Make, your own server, etc.)

4. Publish your site

5. Submit a test form entry

6. Verify the payload arrives at your endpoint

Zapier Webhook for Webflow Form Submissions

Zapier is the fastest no-code path from a Webflow form to any of 6,000+ apps. Here's how to set it up properly.

Step 1: Create a Zap with "Webhooks by Zapier" as the Trigger

1. Go to zapier.com and create a new Zap

2. Search for "Webhooks by Zapier" as your trigger app

3. Select the trigger event: Catch Hook

4. Zapier generates a unique webhook URL — copy it

Step 2: Add the Zapier Webhook URL to Webflow

1. In Webflow Project Settings → Integrations → Webhooks

2. Add a new webhook with event form_submission

3. Paste the Zapier webhook URL you copied

4. Save and publish

Step 3: Test the Connection

1. Back in Zapier, click Test Trigger

2. Submit your Webflow form

3. Zapier should show "We found a request!" with your form data

Step 4: Set Up Your Action

Now connect the form data to whatever you need — Google Sheets, HubSpot, Notion, Slack, Mailchimp, etc. Map the Webflow fields to the target app's fields.

Airtable + Webflow Webhook Integration

Connecting Webflow to Airtable is a powerful combo — Airtable becomes a live database of every form submission, CMS update, or order your site generates.

Option 1: Via Zapier (No-Code)

1. Set up a Zapier webhook trigger as described above

2. For the action, choose Airtable → Create Record

3. Select your Airtable base and table

4. Map the Webflow payload fields to your Airtable columns

Option 2: Via Airtable Automations (Direct Webhook)

Airtable has a built-in webhook trigger in its Automations feature (available on Pro plans and above):

1. In your Airtable base, go to Automations

2. Click + New Automation → When webhook received

3. Airtable provides a webhook URL — copy it

4. Paste this URL into Webflow as your webhook endpoint

5. Submit a test form to send data directly to Airtable

Webflow Dynamic CMS and Webhook Integration

The CMS webhook events (collection_item_created, collection_item_changed, collection_item_deleted) open up powerful content automation workflows.

Use Cases We've Built

1. Sync Webflow CMS to an external database Every time a blog post is published in Webflow, fire a webhook → write to a PostgreSQL table → keep a search index updated.

2. Trigger a social media post CMS item created → webhook fires → Zapier/Make creates a tweet or LinkedIn post with the article title and link.

3. Notify a team on Slack New CMS item published → webhook → Slack message: "New blog post live: [Title] — [URL]"

4. Sync Webflow blog to Airtable content calendar CMS item created/changed → Airtable record updated → content team sees publishing status in real-time.

Setting Up a CMS Webhook

1. Webhooks → Add Webhook → select collection_item_created (or changed/deleted)

2. The payload includes collectionId, itemId, slug, and all field values

3. Use the collectionId to distinguish between multiple CMS collections if your site has several

json

{
  "triggerType": "collection_item_created",
  "payload": {
    "collectionId": "xyz789",
    "itemId": "item456",
    "slug": "my-new-blog-post",
    "fields": {
      "name": "My New Blog Post",
      "post-body": "...",
      "author": "Arjun Shah"
    }
  }
}

Webflow API Webhooks: Advanced Setup for Developers

If you're building a custom backend integration or managing Webflow sites at scale, the Webflow API gives you full control over webhooks programmatically.

List All Webhooks on a Site

GET https://api.webflow.com/sites/{site_id}/webhooksAuthorization: Bearer YOUR_API_TOKEN

Delete a Webhook

DELETE https://api.webflow.com/sites/{site_id}/webhooks/{webhook_id}Authorization: Bearer YOUR_API_TOKEN

Verify Webhook Authenticity

javascript

const crypto = require('crypto');

function verifyWebflowWebhook(payload, signature, secret) {
  const hash = crypto
    .createHmac('sha256', secret)
    .update(payload)
    .digest('hex');
  return hash === signature;
}

Common Webflow Webhook Mistakes to Avoid

From 9 years of Webflow builds, these are the errors we see most often:

1. Not publishing after adding a webhook Webhooks added in Project Settings only activate after you publish your site. A lot of teams set them up and wonder why nothing fires.

2. Forgetting to filter by form name If your site has 3 forms (contact, newsletter, quote request), the webhook fires for all of them. Always check payload.name to route correctly.

3. No retry or error handling on the receiving end Webflow retries failed webhooks a limited number of times. If your endpoint is slow or down, you lose data. Build in proper error responses (return HTTP 200 quickly, process async).

4. Using a free Zapier plan for high-volume submissions Free Zapier plans have task limits and delays. For clients with busy forms, use Make (Integromat) or a direct server endpoint.

5. Not testing with real payloads first The field names in the JSON payload match your Webflow form field names exactly — including capitalisation and spacing. Always test before going live.

Conclusion

Webflow webhooks transform your website from a static front-end into an event-driven platform. Whether you're capturing leads into Airtable, notifying your team on Slack, syncing CMS content to a database, or building multi-step Zapier automations — webhooks are the connective tissue that makes it all work reliably and in real time.

The setups covered in this guide — form webhooks, Zapier connections, Airtable integrations, and CMS triggers — are the exact patterns we use across client projects at TweakDesigns every week.

Want Help Setting Up Webhooks on Your Webflow Site?

We've connected Webflow to CRMs, ERPs, Slack, Airtable, custom databases, and more — across 200+ projects. If you want it done right without the trial-and-error, let's talk.

👉 Book a free Webflow consultation

Published by TweakDesigns — Webflow, Wix Studio & Framer agency, Surat, India.