Webhooks are a powerful way to integrate your applications and services with Webflow, allowing you to receive real-time updates whenever specific events occur on your site. By setting up webhooks, you can automate workflows, trigger external processes, and synchronize data across different platforms without any manual intervention.

Get started with webhooks

Ready to streamline your workflow? Follow the steps below to create your first webhook using the Webflow API.

Start Tutorial

Webhook requests

When an event occurs, Webflow will send a POST request to a specified URL.

The webhook body will be a JSON resource object that relates to the event. The request headers will include:

• A Content-Type header set to application/json
• A x-webflow-timestamp with the time the webhook was sent
• A x-webflow-signature header containing the request signature. Read on for information about validating request signatures.

Below is an example of webhook event data.

1
  {
2
    "triggerType": "form_submission",
3
    "payload": {
4
      "name": "Contact Us",
5
      "siteId": "65427cf400e02b306eaa049c",
6
      "data": {
7
        "First Name": "Zaphod",
8
        "Last Name": "Beeblebrox",
9
        "email": "[email protected]",
10
        "Phone Number": 15550000000
11
      },
12
      "schema": [
13
        {
14
          "fieldName": "First Name",
15
          "fieldType": "FormTextInput",
16
          "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c4"
17
        },
18
        {
19
          "fieldName": "Last Name",
20
          "fieldType": "FormTextInput",
21
          "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c5"
22
        },
23
        {
24
          "fieldName": "email",
25
          "fieldType": "FormTextInput",
26
          "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c6"
27
        },
28
        {
29
          "fieldName": "Phone Number",
30
          "fieldType": "FormTextInput",
31
          "fieldElementId": "285042f7-d554-dc7f-102c-aa10d6a2d2c7"
32
        }
33
      ],
34
      "submittedAt": "2022-09-14T12:35:16.117Z",
35
      "id": "6321ca84df3949bfc6752327",
36
      "formId": "65429eadebe8a9f3a30f62d0",
37
      "formElementId": "4e038d2c-6a1e-4953-7be9-a59a2b453177"
38
    }
39
  }

Creating a webhook

In this tutorial, we’ll walk through creating a webhook to listen for new submissions to a contact form on a site. Whenever someone submits this form, Webflow will send a notification to the specified destination. Additionally, we’ll cover how to verify that the webhook requests you’re receiving are genuinely from Webflow, ensuring secure and reliable communication with your application.

Prerequisites

• A site token or bearer token from a Webflow Data Client App with the forms:read scope.
• A Webflow test site. You can use the Biznus template to quickly set up a site equipped with a contact form.
• A service to accept an HTTPS request. While we’ll be using https://webhook.site in this tutorial, you’re free to choose any platform.