Embed an Airtable form in Webflow

Embed an Airtable form on your website and track form submissions sent directly from your site.

integrations
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!
Pro tip: You can also use Logic’s Make HTTP request block to send data from native Webflow form submissions to Airtable. Learn more about creating records in Airtable with Logic.

In this lesson:

  1. Copy the embed code from Airtable
  2. Paste the code into your site

Copy the embed code from Airtable

In your Airtable spreadsheet in the top left, click on the Grid view. Under Add a view, choose Form, and from here you can customize your form. Keep in mind that the name you give the form will show up on your site. 

Step 1 shows the grid view button is highlighted in the Airtable spreadsheet.
Step 2 and 3 are highlighted in the airtable dashboard. Step 2 is highlighting the Form button to create a new view. Step 3 shows the new spreadsheet name Office Coordinator Application.

Click Share form > Embed this form on your site to open a new tab with the code snippet. Before you grab the code snippet, toggle the Autosize height switch to on. Then select and copy the Embed code to your clipboard. 

Steps 1 and 2 are highlighted. Step 1 highlights the Share form button. Step 2 highlights the embed this form on your site button. The embed code is to the right of steps 1 and 2.


Paste the code into your site

In the Designer of your Webflow project, click the plus sign from the left toolbar.  

Under Components, drag an Embed element into your existing design. Use Command (Control) + V to paste the code snippet from the previous step into the HTML Embed Code Editor that pops up. Click Save & close.

Webflows designer HTML embed code editor contains the code snippet from the Airtable spreadsheet.

From the top right click Publish > Publish to Selected Domains and check out the published result.


The published website with the Airtable spreadsheet embedded.


Take a minute to test your form — the data from your submission should show up in the Grid view back in your Airtable spreadsheet. 

Nice work!

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?