Handy tip: You can also utilize Logic’s Make HTTP request block to dispatch data from original Webflow form submissions to Airtable. Explore more about generating records in Airtable with Logic.
Throughout this tutorial:
- Duplicate the insert code from Airtable
- Insert the code in your website
Duplicate the insert code from Airtable
Within your Airtable spreadsheet at the upper left corner, press on the Grid view. Beneath Add a view, select Form, and from here, you can individualize your form. Bear in mind that the label you assign to the form will be visible on your website.
![64b948e17289000d148abaee_607dcea33d133a549771ed53_embed-an-airtable-form-in-webflow_1 Step 1 shows the grid view button is highlighted in the Airtable spreadsheet.](https://webflow-s3.tenten.co/2024/04/64b948e17289000d148abaee_607dcea33d133a549771ed53_embed-an-airtable-form-in-webflow_1.png)
![64b948e17289000d148abaea_607db3f70f1439f01a825bb9_embed-an-airtable-form-in-webflow_2 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.](https://webflow-s3.tenten.co/2024/04/64b948e17289000d148abaea_607db3f70f1439f01a825bb9_embed-an-airtable-form-in-webflow_2.png)
Press Share form > Embed this form on your site to unveil a new tab with the code snippet. Prior to taking the code snippet, switch on the Autosize height toggle to on. Then highlight and copy the Embed code to your clipboard.
![64b948e17289000d148abae6_607db41edfebd0e4c1141ab8_embed-an-airtable-form-in-webflow_3 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.](https://webflow-s3.tenten.co/2024/04/64b948e17289000d148abae6_607db41edfebd0e4c1141ab8_embed-an-airtable-form-in-webflow_3.png)
Insert the code in your website
Within the Designer of your Webflow venture, press the plus icon from the left panel.
Under Components, drag an Embed element into your current design. Use Command (Control) + V to insert the code snippet from the previous step into the HTML Embed Code Editor that emerges. Press Save & close.
![64b948e17289000d148abae2_607db432fa34360a0789b650_embed-an-airtable-form-in-webflow_4 Webflows designer HTML embed code editor contains the code snippet from the Airtable spreadsheet.](https://webflow-s3.tenten.co/2024/04/64b948e17289000d148abae2_607db432fa34360a0789b650_embed-an-airtable-form-in-webflow_4.png)
From the upper right corner tap Publish > Publish to Selected Domains and observe the published outcome.
![64b948e17289000d148abaf2_607db43e7421f77ad0624cb6_embed-an-airtable-form-in-webflow_5 The published website with the Airtable spreadsheet embedded.](https://webflow-s3.tenten.co/2024/04/64b948e17289000d148abaf2_607db43e7421f77ad0624cb6_embed-an-airtable-form-in-webflow_5.png)
Take a moment to test your form — the data from your submission should display in the Grid view back in your Airtable spreadsheet.
Great job!
- Include or eliminate Workspace spots and members - April 15, 2024
- Centering box summary - April 15, 2024
- Store a site for future reference - April 15, 2024