Airtable forms

How to integrate Airtable forms with Webflow

What is Airtable? Airtable is a relational database you work in like a spreadsheet, with saved views, automations, and a REST API sitting on top of every table. Its form features write a submission straight into a table as a new record, which is why teams pick it when a website form needs to land somewhere a person can sort, filter, and act on it the same day.

"Airtable forms" describes two different builds on a Webflow site, and choosing the wrong one costs you a rebuild later. The first is an Airtable form you embed: Airtable hosts and renders the form, you paste its iframe into a page, and the submission never touches Webflow. The second is a Webflow form that writes into Airtable: your own markup and styling, Webflow validation, Webflow storing the submission, and a record created in a base afterwards. People sometimes mean a third thing, a separate form builder such as Jotform that happens to save into Airtable, and that is a different product decision this page does not cover.

The tradeoff between the two is design against plumbing. An embedded Airtable form inherits none of your site styles, adds a third-party iframe to the page, and keeps every response inside Airtable. A Webflow form keeps your classes, your breakpoints, and your submission inbox, but nothing reaches Airtable until you build the path.

Four approaches cover almost every setup:

• Airtable MCP server: connect your AI tool to your bases so it can read submissions, create records, and build automations in plain language.
• Embedded Airtable form: paste the iframe from Airtable into a Code Embed element when you want the form live today and do not need it on-brand.
• Webflow form plus a webhook: keep the Webflow form and point its webhook at an Airtable automation so each submission becomes a record.
• The two REST APIs: write your own sync when you need conditional routing, enrichment, or a round trip back into Webflow CMS.

Most sites end up combining the second or third approach with the fourth once the volume grows.

Connect your AI tools to Airtable and Webflow

Both platforms now expose an MCP server, so an agent can work across the form and the base without you writing a line of glue code. Airtable's MCP server is available to every user on every plan, and it can search bases, create and modify records, read interface pages, and create or update automations. Authorization runs through OAuth, and during the flow you choose exactly which bases, apps, and workspaces the tool may touch, so an agent debugging one form base never sees the rest of your workspace.

The Webflow MCP server covers the other half. It works inside your existing Webflow permissions and roles, each site can supply its own Agent Instructions, and the same agent can add form fields to a page, register a webhook, and read the site's form submissions. We list it on the free Starter Site plan alongside Basic and Premium, so there is no upgrade gate before you try it.

A practical first task: ask the agent to list the forms on a site, read the last week of submissions, and create a matching table in Airtable with the same field names. That gets the schema right before you wire anything together, which is where most of these builds go wrong.

Embed an Airtable form on a Webflow page

This is the fastest route and the least flexible one. Airtable renders the form, so nothing about it can break your Webflow validation, and equally nothing about your style guide reaches inside it.

1. In Airtable, open the base and create a form view, or build a standalone form and publish it.
2. Click Share form, then Embed this form on your site, and copy the iframe snippet Airtable generates.
3. In Webflow, drop a Code Embed element where the form belongs and paste the snippet. Custom code in a single Code Embed cannot exceed 50,000 characters, which an iframe snippet will never approach.
4. Style the wrapper around the embed, set its width and height, and publish.

Two behaviours catch people out. Embedded forms use popups for redirects, so a redirect after submit opens in a new tab and fails silently if the visitor blocks popups. And the Code Embed element needs a Core, Growth, Agency, or Freelancer Workspace, or an active Site plan on the site itself.

You can preload values by adding prefill_ parameters to the form URL, not to the iframe source: append ?prefill_FieldName=Value, encoding spaces as %20 and each symbol as its UTF-8 escape. A prefilled form URL stops working past 8,000 characters, so prefill the two or three fields you actually know. The same embedding mechanism works for grid, calendar, and gallery views if you want to publish base data rather than collect it.

On the Free Airtable plan you cannot remove Airtable branding from a form or customize its header image. Removing branding, adding a logo, editing the submit label, password protection, and domain restriction all sit behind the Team, Business, and Enterprise Scale plans, per Airtable's own plans overview. Check current tiers on Airtable's pricing page before you promise a client an unbranded embed.

Send Webflow form submissions into Airtable

Choose this when the form has to look like the rest of the site. You build the form with Webflow's form elements, Webflow stores every submission, and Airtable receives a copy.

1. In Airtable, create an automation with the When webhook received trigger and copy the unique URL it generates.
2. In Webflow, select the form, open the Settings panel, click the add icon next to Send to, and choose Webhook. Paste the Airtable URL and save.
3. Copy the secret key Webflow shows once, and store it. You need it to validate the request signature on anything that sits between Webflow and Airtable.
4. Submit the form on the published site so Airtable receives a sample payload, then map each field from that payload to a column in your table.

Keep Webflow and Email notifications selected alongside the webhook. They coexist, so a failed automation run never loses you the lead. The one option that does not combine with them is Custom action, which posts the form somewhere else entirely and stores nothing in Webflow.

Two cautions worth writing down. Anyone holding the Airtable webhook URL can trigger that automation, so treat it as a credential and regenerate it if it leaks. And if you would rather not manage the mapping yourself, Zapier and Make both appear in Webflow's Apps list and can sit between the form and the base. Once records are landing, an Airtable trigger can fire follow-up steps on each new row.

Build with the Webflow and Airtable APIs

Write code when you need conditional routing, enrichment before the record is created, or a path back out of Airtable into Webflow CMS. Webflow does not run backend code for you, so this means a serverless function or a small server of your own.

Read submissions from Webflow

You do not have to wait for a webhook to fire. The Data API can list form submissions for a site or a single form with a token carrying the forms:read scope, returning up to 100 records per page with an offset for the next one. That endpoint is what you want for a nightly reconciliation job that catches anything the live webhook dropped.

For live delivery, register a webhook through the API rather than the Settings panel: POST /v2/sites/{site_id}/webhooks with a triggerType of form_submission, optionally filtered to one form. Each site accepts 75 registrations per trigger type, which is generous but not unlimited if you are provisioning per client. The webhook reference lists every supported event.

Write records into Airtable

Create a personal access token with the data.records:write scope, then post to POST /v0/{baseId}/{tableIdOrName}. The create records endpoint takes either a single record object or an array of them, and typecast is worth enabling when the form sends strings into select or date fields. Reading back is symmetrical: the list records endpoint returns 100 records per page by default and accepts filterByFormula, so you can pull only the rows a reviewer has approved.

Budget for the rate limits early. Airtable allows 5 requests per second per base, and 50 requests per second across all personal access token traffic from one user, returning a 429 with a 30 second cooldown when you exceed either. A form that fires one write per submission will never notice, but a backfill will hit it in the first minute.

Move attachments across

File uploads are the step people get wrong. URLs in an attachment field expire two hours after the API returns them, so writing one into a CMS item leaves you with a broken image by lunchtime. Download the file inside your function, upload it to Webflow, and store the URL Webflow gives back. If you would rather not maintain that, PowerImporter already handles attachment conversion during a sync, and Whalesync covers two-way sync including multi-reference fields.

What you can build with Airtable forms and Webflow

Once submissions reach a base, the form stops being a dead end and becomes the front door to a workflow. These are the builds that come up most often on real projects.

Four patterns worth copying:

• Application and intake pipelines: collect entries through a Webflow form, review and score them in an Airtable grid or interface, and publish only the approved rows back to a Collection.
• Event registration with capacity: hold sessions and seat counts in Airtable, let a rollup close a session when it fills, and have the form hide or reject sold-out options.
• Gated resource requests: capture the request in Webflow, log it as a record, and let an automation email the asset while your team sees the full request history in one table.
• Directory submissions: take listings through a form, moderate them in Airtable, then create the CMS item so the public directory only ever shows vetted entries.

Each of these needs data flowing in both directions, not just inbound. See how to display Airtable data on a Webflow site for the read side, then work through Zapier sync failures if records stop arriving, or the order automation walkthrough if the trigger is a purchase rather than a form.