Badge Webflow Award Winner 2023

How to connect Webflow and Airtable with Make (Integromat)?

Published on 
7/10/2021
-
Amended on 
27/3/2023
Reading time: 5 min
Woman showing a computer with 3 nocode tools Webflow Airtablet and Integromat
Written by
Thomas Labonne with a T-shirt Digidop

Thomas Labonne

Co-founder

One way to connect Webflow and Airtable is to use Integromat. You can easily manage your Webflow site data with Airtable and Integromat.

Key points to remember

In this example we will show you how to connect a webflow form to Airtable with Make (Integromat)

1 - Add a Webflow module

Connect your Webflow account to Make (Integromat) by adding a new module.

Adding a Webflow module to the Integromat automation interface
Webflow module

2 - Choose a trigger

The trigger is the first step in your automation chain. In this example, we will select a "Watch Events" type trigger per webhook so that the automation chain is launched as soon as new data is received. This data will come from a Webflow contact form.

Selection of a "Watch Events" action from the Integromat Webflow Module
Trigger

3 - Send the data to the webhook

The objective is to indicate to the webhook what type of data it should subsequently process and forward to the rest of the automation chain. To do this, you must launch the "Watch Event" trigger by right-clicking on the module and then "Run this module only". Then go back to your website, and fill in a web form to send the data to the trigger.

Run button of the webflow module on the Integromat board
Sending data to the webhook

4 - Connect an Airtable module

Once the data is received, add a new Airtable module and connect it to Webflow.

Connecting the Airtable Module with the Webflow Module in Integromat
Airtable Module

5 - Choose an action

You have a whole host of actions to perform in your Airtable database with Integromat. You can easily choose to add, modify, delete, view, and retrieve information from your databases. You can select specific views, add formulas or filter systems to manage all these actions.

For this example, we choose to add a new line in a view, by clicking on "Create a Record".

Choosing a "create a record" action for the Airtable module from the Integromat workspace.
Choosing an Airtable action

6 - Add an Airtable account

Add a new Airtable account by clicking on "add".

Add button on the Airtable module in the Integromat workspace
New Airtable account


7 - Fill in the API key

You need to fill in the API key of your Airtable account in order to link it to Make (Integromat). We will divide this step into four actions as follows.

7.1 Rename your connection to your Airtable account name

Renaming your connection is essential for the rest of your automations. Indeed, you may have to connect a different account than yours later on.

Space to rename your Airtable connection from the Integromat workspace
New Airtable connection

7.2 Go to the Airtable settings

Go to your Airtable account settings to find your API key.

Account button in the Airtable workspace
Airtable parameter

7.3 Copy your API key

Copy your API key hidden by dots. This key will allow you to uniquely identify yourself in Make (Integromat).

Airtable interface parameter area with focus on the API field
Airtable API Key

7.4 Paste the API into Make (Integromat)

Paste your API key to validate your new Airtable connection and click "Continue". A pop-up window will open asking you for permissions to your new Airtable account. Accept the permissions and proceed to the next step.

Space to fill in your API key from the Integromat workspace
Insert API

8 - Add a base

You probably have several databases in Airtbale, allowing you to manage different types of projects and data. The idea for this example would be to select a database where your different prospects or clients are located. Select the database you want to connect to Webflow from the drop-down list.

Multiple choice drop-down list on the Airtable module from the Integromat workspace
Choice of Airtable base


9 - Add a table

Once you have selected the database, you must now choose the table in which you are going to create new rows. This will then give you access to the column headers of that database for the tagging stage.

Adding a table to the Airtable module from the Integromat workspace
Choosing a table

10 - Add markup

You can now fill in the fields in your table with the various data retrieved by the Airtable webhook. Match the data and click OK to complete the connection with Integromat.

Filling the data tagging in the Airtable module from the Integromat workspace
Field marking
💡 Remember to save the automation. Integromat does not do automatic backups 😕


You have now connected your Webflow form to an Airtable database using Integromat. If you do not have Integromat, another method would have been toembed an Airtable form in Webflow.

Flomodia by Digidop
Coudac project by Digidop
project Heka by DigidopFlaw by project DigidopMorfo project by Digidop