Automatically Save Webflow Form Submissions as Airtable Records
Every time a visitor submits a form on your Webflow site, this workflow instantly creates a new record in Airtable. No more manual data entry or copy-pasting form responses.
- 1
Set up the Webhook trigger to receive Webflow form data
Add a
Webhooknode as the first node in your workflow. Copy the generated webhook URL from theWebhook URLssection. In your Webflow project, go to Project Settings > Integrations > Webhooks, clickAdd Webhook, chooseForm Submissionas the trigger event, and paste the n8n webhook URL. Save your Webflow webhook. Back in n8n, clickListen for Test Eventand submit a test form on your Webflow site to capture a sample payload. - 2
Extract and map the form fields you need
Add a
Setnode after the Webhook node. In theSetnode, add new fields for each piece of data you want to save. For example, create a field calledNameand set its value to{{ $json.body.name }}, a field calledEmailmapped to{{ $json.body.email }}, and a field calledMessagemapped to{{ $json.body.message }}. Adjust the field names to match the exact field names used in your Webflow form. ToggleKeep Only Setto on so only your mapped fields are passed forward. - 3
Connect to Airtable and create a new record
Add an
Airtablenode after the Set node. Set theOperationtoCreate Record. In theCredentialsfield, connect your Airtable account by providing your API key or using OAuth. Set theBase IDto the ID of your Airtable base (found in your base URL, e.g.appXXXXXXXXXXXXXX) and theTable Nameto the name of your table (e.g.Form Submissions). Map each column in Airtable to the corresponding field from the previous Set node using{{ $json.Name }},{{ $json.Email }}, and{{ $json.Message }}.
Frequently asked questions
What Webflow plan do I need to use webhooks?
Webflow webhooks are available on paid site plans. The Basic plan and above support webhook integrations under Project Settings > Integrations. If you are on a free Webflow plan, you will need to upgrade before you can send form data to n8n.
What if my Webflow form has more fields than Name, Email, and Message?
Simply add more fields in the `Set` node. Each Webflow form field is sent in the webhook payload under `$json.body` using the field name you set in Webflow. For example, a field named `phone` in Webflow would be accessed as `{{ $json.body.phone }}` in n8n. Add a matching column in your Airtable table as well.
Will this workflow capture form submissions that happen while n8n is not running?
If you are self-hosting n8n, submissions sent while your server is down will be lost since there is no queue. To avoid missed submissions, use n8n Cloud or ensure your self-hosted instance runs continuously. You can also enable the `Respond Immediately` option on the Webhook node so Webflow does not time out waiting for a response.