Webhooks

Webhooks allow you to send real-time updates about actions made in Webflow to any service that can receive an HTTP request. This could look like an integration that sends a candidate's details to Greenhouse after they submit a form on your site, or automatically notifying your team when you've received a new ecommerce order.

In this guide, we’ll create a webhook thats sends data to an Airtable base every time a form is submitted on your site. We’ll also cover how to ensure the application you’re sending information to is receiving a webhook that originated from Webflow.

New to forms on Webflow? Check out Webflow University or use the pre-designed Luma template to swiftly set up a site equipped with a contact form.

📘

Prerequisite

You'll need a service receptive to HTTP requests. While we'll be using Airtable in this tutorial, you're free to choose any platform.

Authentication

To access the API, you will need to provide an access_token to authenticate with Webflow. Check out our authentication guideto learn more. If you plan on verifying requests via a signature, you must authenticate via an App.

Webhook Fundamentals

A webhook relays updates to an external service, but to do so, it must be primed to detect specific events on your Webflow site. Familiarize yourself with potential events via our API Reference.

Your webhook needs:

• Site ID: The unique identifier of your Webflow site
• Event Type: Specific event the webhook will monitor.
• Destination URL: Unique URL prepped to accept HTTP requests.

Detailed Steps

We're configuring our webhook to listen for new submissions to our contact form featured in the Luma template. Once created, any time someone submits this form, Webflow will send a notification to the destination we've chosen.

Step 1: Configure your form

Begin by selecting the Webflow site where you'd like the webhook. For a quick start, use the Luma Template, which includes a ready "Contact" form. Ensure every form field has a distinctive name. These names will be used as keys in the webhook's payload.

In the Navigator, find your form and all of its corresponding fields. Give each field a unique name using the field settings pane, or by clicking the gear icon right next to the element identifier. These field names will be the keys that the webhook sends in the body and must be unique.

Step 2: Get the Site ID

Retrieve your site's unique ID by calling the List Sites endpoint, as shown in the example below.

import fetch from 'node-fetch';

// Get Access Token and Site Name
const ACCESS_TOKEN = "YOUR_ACCESS_TOKEN"
const siteName = "YOUR_SITE_NAME"

// Function to get your site by name
const getSiteByName = async (siteName) => {

    const sitesUrl = 'https://api.webflow.com/v2/sites'
    const options = {
        method: 'GET',
        headers: {
            accept: 'application/json',
            authorization: `Bearer ${ACCESS_TOKEN}`
        }
    };

    const sites = await fetch(sitesUrl, options)
        .then(res => res.json())
        .catch(err => console.error('error:' + err));
    const site = await sites.find(site => site.name === siteName)
    return site

}

// Run the function and return the Site ID
(async () => {
    const site = await getSiteByName(siteName)
    const siteId = site.id
    console.log(siteId)

})()

Step 3: Get your destination URL

Airtable

To send information to Airtable, you'll require a webhook-ready URL. Follow the steps provided for setting up Airtable's incoming webhooks trigger via their automations platform. We can get the URL by following these steps:

1. Create an Airtable account if you don't already have one
2. Create or navigate to an Airtable Base where you want to store data from your form submissions
3. Make sure you have the correct fields to match the form data you'd like to collect. Our form is collecting name, email, and message info, so our table will need fields for each piece of information.

4. Navigate to the "Automations Menu" and create a new automation with the "When a webhook is received trigger"
5. Copy the URL generated by Airtable

📘

Quick Tip

For temporary testing, generate a URL via webhook.site

Step 4: Create Webhook

Once you have your Site ID and the destination URL, create your webhook by sending a POST request to the Create Webhook endpoint.

// Async Formula to Create Webhook
const createWebhook = async (siteId, payload) => {

    const createWebhookUrl = `https://api.webflow.com/v2/sites/${siteId}/webhooks`
    const options = {
        method: 'POST',
        headers: { 
          accept: 'application/json', 
          'content-type': 'application/json', 
          'authorization': `Bearer ${ACCESS_TOKEN}` 
        },
        body: JSON.stringify(payload)
    };
    const newWebhook = await fetch(createWebhookUrl, options)
    return newWebhook.json()
}

// Calling our Formula in an Async 
(async () => {

  	const destinationURL = YOUR_DESTINATION_URL
    const siteId = site._id

    // API request payload
    const payload = {
        triggerType: 'form_submission',
        url: destinationURI
    }
    const newWebhook = await createWebhook(siteId, payload)
    console.log(newWebhook)
})()

📘

Use our interactive API Docs to send requests

You can also use the interactive API Reference to quickly send a POST request to the Create Webhook endpoint without writing any code.

After successfully establishing your webhook, you should receive a confirmation similar to the one shown below:

{
  "id": "582266e0cd48de0f0e3c6d8b",
  "triggerType": "form_submission",
  "siteId": "562ac0395358780a1f5e6fbd",
  "workspaceId": "4f4e46fd476ea8c507000001",
  "createdOn": "2022-11-08T23:59:28.572Z",
  "lastTriggered": "2023-02-08T23:59:28.572Z",
  "filter": null,
  "url": "https://webhook.site/7f7f7f7f-7f7f-7f7f-7f7f-7f7f7f7f7f7f"
}

Step 5: Send a test submission

Once you've successfully created the Webhook to listen for new form submissions, you can test it by navigating to the form on your site and submitting a response.

After submitting a response, navigate to your Airtable automation and click the blue Test Trigger button. If Airtable receives a successful response, you'll see a green "Step successful" message and "Found 1 Webhook" underneath. From here, you can drill down into the response Airtable has received including the form name, siteId, and data, the latter which will include the fields you've filled out in the form.

Step 6: Finalize Airtable Automation

Now that you've got the information into Airtable via automations, you can add it to your table by using the "Create Record" action. Through the automation configuration, you can map the form data to the fields in your table and set the automation live.

Success! 🎉

You've created your first webhook and created an integration. Good times!