How to Integrate Your Webflow Forms with Airtable

At Whalesync, we love Webflow. We built our site with Webflow, collect email addresses with Webflow forms, and host blog posts in the Webflow CMS. One of our few gripes with Webflow is that form submissions are not sent to their CMS. Despite being a highly requested feature since 2017, the most common workaround still involves Zapier - and with Zapier, the best you can do is a 1 minute lag from form submission to CMS update.

‍

.png)

To scratch our own itch, we built a workaround using Airtable and Whalesync. With these two tools, you can send your Webflow form submissions into your Webflow CMS in a matter of seconds.

This guide walks step-by-step through the process. There are two main sections:

1. Send Webflow form data to Airtable
2. Sync Airtable data to Webflow CMS

Here’s a teaser of it all working in action 👇:

https://www.loom.com/share/bf8de1178a9f40619e6bc696b9267739

Send Webflow Form Data to Airtable

First, we will send our Webflow form responses to Airtable. Instead of using Zapier or Integromat, we take advantage of Webflow webhooks. If you’re not familiar with webhooks, don’t worry! I promise it’s super easy.

This section was inspired by Conor Finlayson’s amazing Webflow Forms to Airtable (without Zapier or Integromat)! 🙏

‍

1. Set up Webflow form

Create your form in Webflow

‍

Give each form’s field a descriptive name in the form settings

‍

2. Set up Airtable table

Create an Airtable table with fields for each of your form’s fields

• Use the same names as you did in Webflow
• *Note - you will need an Airtable Plus plan ($12/mo)

‍

3. Generate Webhook URL in Airtable

Click Automations

‍

Create a custom automation

‍

Add Trigger - When Webhook Received

‍

Copy the Webhook URL

‍

4. Add webhook trigger to Webflow

Go to project settings

‍

Click “Add Webhook”

‍

Trigger type = form submission, paste the Airtable Webhook URL

Publish Webflow site and run a test

• Publish your Webflow site again
• Submit test data to the Webflow form

‍

• In the Airtable automation hit “Test trigger”

‍

• View the form data

.png)

‍

5. Map form submissions to Airtable

In Airtable automation hit “Add Action” - “Create Record”

‍

Select your table, choose the fields you want to populate, and map the data

‍

Test action and turn the automation on

• *Note - this workflow will trigger whenever any form on your site is submitted
• *Note - instead of mapping Slug, I used a formula to convert the Name to a Slug

‍

Sync Airtable Data to Webflow CMS

Congrats! You made it to the easy part of this guide 🙂.

With your form data in Airtable, the last few steps are a breeze. With Whalesync, we can instantly sync our Airtable data to the Webflow CMS.

‍

1. Set up Webflow CMS

Create a Collection with each of the same fields as your Airtable

‍

2. Set up Whalesync Base

Create a Whalesync base

• Connect Airtable with your Airtable API Key + Base Sharing Link
• Connect Webflow with an API Key

‍

3. Map Airtable form fields to Webflow form fields

Map your Airtable table to your Webflow collection

• Map each of the fields
• *Note - if your field names match exactly, Whalesync will auto-map them for you (⚡).

‍

4. Turn syncing on

Toggle the blue switch to turn syncing on

‍

And that’s it! 🎉 When you submit your Webflow form, it will populate Airtable and then your Webflow CMS instantly. Enjoy!

First Published here