How to Guides

Embedding Airtable Forms

Add an Airtable form to a page on your website

Embedding Airtable Forms

This guide explains how to add an Airtable form to a page on your website. Airtable forms collect responses directly into an Airtable base, so they're a good fit when you already manage that data in Airtable — surveys, applications, signups, or intake forms.

Two Ways to Collect Form Data

The platform has its own built-in form system that stores submissions in your dashboard, sends email notifications, and includes bot protection — no third-party account needed. Use Airtable instead when:

  • You already keep this data in an Airtable base
  • You want Airtable's views, automations, or sharing
  • Non-technical teammates manage responses in Airtable

If none of those apply, the native form is simpler and keeps everything in one place.

Before You Start

You'll need:

  • An Airtable account with a base to collect responses
  • A form built in that base (Airtable's Form view)
  • Edit or admin access to the page you want to add the form to

Step 1: Create the Form in Airtable

  1. Open your base in Airtable
  2. Click the + next to your views and choose Form
  3. Drag in the fields you want to collect and set which are required
  4. Customize the title, description, and submit message
  5. Click Share form (top right)
  6. Toggle Create a shareable form link on

Keep this tab open — you'll copy the embed code from here in the next step.

See Airtable's own walkthrough: Creating forms using the form builder and Configuring a form's share settings.

Step 2: Copy the Embed Code

In the Share form panel:

  1. Click Embed this form on your site
  2. Copy the full <iframe> snippet Airtable provides

For Airtable's reference on this step, see Embedding forms.

It looks something like this:

<iframe
  class="airtable-embed"
  src="https://airtable.com/embed/shrXXXXXXXXXXXXXX?backgroundColor=blue"
  frameborder="0"
  width="100%"
  height="640"
  style="background: transparent; border: 1px solid #ccc;">
</iframe>

Tip: Airtable also offers a <script>-based embed that auto-resizes. The plain <iframe> above is the most reliable on a static site — stick with it unless you have a reason not to.

Step 3: Add the Embed to Your Page

How you do this depends on whether you edit through the CMS or work in the site's files directly.

Using the CMS

  1. Log in to the platform and open your website's dashboard
  2. Open the page you want to add the form to (see Editing Content)
  3. Place your cursor where the form should appear
  4. Switch the editor to HTML / embed mode (or insert an Embed / HTML block)
  5. Paste the <iframe> snippet from Step 2
  6. Save, then publish when you're ready

Editing the Files Directly

If you're a website developer working in the site source, paste the <iframe> directly into the page's HTML or Markdown where you want it to render:

<div class="form-embed">
  <iframe
    class="airtable-embed"
    src="https://airtable.com/embed/shrXXXXXXXXXXXXXX"
    frameborder="0"
    width="100%"
    height="640"
    style="background: transparent;">
  </iframe>
</div>

Wrapping the iframe in a container makes it easier to constrain the width or center it with your site's theme styles.

Step 4: Verify It Works

  1. Visit the live page (or a preview) in your browser
  2. Confirm the form loads and matches the fields you configured
  3. Submit a test response
  4. Check that the response appears in your Airtable base

Customizing the Embed

A few attributes on the <iframe> are worth adjusting:

  • height — Airtable can't auto-grow a plain iframe, so set this tall enough to fit your longest form. Increase it if you see an inner scrollbar.
  • width="100%" — Lets the form fill its container. Constrain the width with the wrapping element instead of a fixed pixel width so it stays responsive on mobile.
  • backgroundColor (in the src URL) — Airtable's accent color for the form. Match it to your brand where you can.

Troubleshooting

The form area is blank

  • Make sure the entire <iframe> snippet was pasted, including the src URL
  • Confirm the form's shareable link is still on in Airtable — turning it off breaks the embed
  • Check that your editor didn't strip the <iframe> tag (some rich-text editors remove it unless you're in HTML/embed mode)

The form is cut off or has a scrollbar inside it

Increase the height value on the <iframe> until the whole form fits.

The form looks cramped on mobile

Use width="100%" and avoid a fixed pixel width. Constrain the size with the wrapping <div> instead.

Responses aren't showing up in Airtable

  • Submit a test response yourself and watch the base
  • Make sure you're looking at the correct base and table
  • Check any Airtable automations or filtered views that might be hiding new rows

Need More Help?