Start free
‹Blog

How to Embed an Airtable Form on Your Website (4 Ways)

FE
Filla Editorial•beginner•Mar 16, 2026

How to Embed an Airtable Form on Your Website (4 Ways)

Embedding an Airtable form on your website means visitors can submit directly into your Airtable base without leaving your page. There are four ways to do it — and the right one depends on how you want the form to behave on your site.

This guide covers all four embed modes, explains the difference between native Airtable embeds and Filla's embeds, and includes setup instructions for WordPress.

Want more than a basic iframe Filla creates Airtable forms with four embed modes: inline, popup, slider, and fullscreen — all with your branding, no Airtable watermarks

Start free

Native Airtable embed: what it does and where it falls short

Before covering the four embed modes, it's worth understanding the native option.

How to get a native Airtable embed code

  1. Open your Airtable base
  2. Open a form view (or create one from the Views sidebar)
  3. Click Share form in the top right
  4. Select Embed this form
  5. Copy the iframe code

The embed code looks like this:

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

Paste it into any page that accepts HTML and the form loads inline. Submissions go directly to your Airtable table.

The limitations of native embeds

One embed mode only. Native Airtable forms generate a single embed type: an inline iframe. There is no popup, no slider, no fullscreen overlay.

Fixed height with internal scrolling. The default height is 533px. If your form is taller, it scrolls inside the iframe. On mobile, this creates a scroll-within-scroll problem that frustrates most users.

No branding control. You can set a cover image and a background color. You can't change fonts, button styles, or field widths. The "Powered by Airtable" footer appears on every embedded form.

No conditional logic. Native Airtable forms don't support show/hide logic — which means embedded forms can't branch based on what respondents enter.

No custom thank-you redirect. After submission, the form shows Airtable's built-in confirmation message. You can edit the text, but you can't redirect users to a specific URL on your site.

For quick internal tools or simple one-page forms, the native embed is fine. For anything on a real website where you care about the user experience, you'll hit these limits quickly.

The 4 Filla embed modes

Filla generates four distinct embed types for every form. All four appear in the Share panel after you've built your form. Each has a different behavior that's suited for different page positions and use cases.

Embed Mode 1: Standard inline iframe

The most common embed type. The form appears inline on the page — respondents scroll to it, fill it out, and submit without any modal or overlay.

Best for: Contact pages, application forms, landing page CTAs, long-form intake.

How it works in Filla:

  1. Build your form in Filla
  2. Click Share in the top-right corner
  3. Select Inline from the embed type options
  4. Set your preferred width (100% for full-width, or a fixed pixel value)
  5. Copy the code snippet

The snippet is an iframe with a postMessage resize listener. Unlike native Airtable, the height adjusts automatically as fields show and hide due to conditional logic or as the respondent moves through multi-step pages.

Example embed code:

<iframe
  src="https://filla.io/f/your-form-id"
  width="100%"
  height="600"
  frameborder="0"
  style="border: none; border-radius: 8px;"
></iframe>

Embed Mode 2: Popup (modal overlay)

The form is hidden until a respondent clicks a trigger button. Clicking the button opens the form in a centered modal overlay on top of the current page content.

Best for: "Request a demo" buttons, "Apply now" CTAs, lead capture on feature pages. Any scenario where you want to keep the user on the current page but open the form on demand.

What you configure in Filla:

  • Button text: The label on the trigger button (e.g., "Request a demo", "Apply now", "Get started")
  • Button color: Matches your brand accent color
  • Button size: Small, medium, or large
  • Button screen position: Where the floating trigger button appears on the page

How it works: The snippet creates a small floating button. When clicked, it opens the form in a modal with a close button. When the respondent submits, the modal closes and the page returns to its normal state.

Example embed code:

<script
  src="https://filla.io/embed.js"
  data-form-id="your-form-id"
  data-mode="popup"
  data-button-text="Request a demo"
></script>

When to use a popup instead of inline: Use a popup when the form is secondary to the page's main content. A product page should not have a long inline form competing with the product description. A popup lets users explore the page first and open the form when they decide to act.

Embed Mode 3: Slider (side panel)

The form slides in from the left or right edge of the screen when a trigger button is clicked. The underlying page content remains visible alongside the open panel.

Best for: Support request forms, quick feedback, context-sensitive actions where the user should be able to reference the page while filling out the form.

What you configure in Filla:

  • Slide direction: Left or right edge
  • Panel width: The width of the slide-in panel (default: 480px)
  • Trigger button text and style: Same options as the popup mode

How it works: The trigger button appears on the page. When clicked, a panel slides in from the configured edge. The rest of the page remains visible, slightly pushed or overlaid depending on your configuration. The respondent fills out the form while still able to see the page behind it.

Example embed code:

<script
  src="https://filla.io/embed.js"
  data-form-id="your-form-id"
  data-mode="slider"
  data-direction="right"
  data-button-text="Send feedback"
></script>

When to use a slider: Support forms, contextual feedback forms ("How was this page?"), and form-heavy admin tools where the respondent benefits from seeing the surrounding context while they fill in fields.

Embed Mode 4: Fullscreen overlay

The form expands to fill the entire viewport. Everything else on the page is hidden while the form is open. The respondent has the form's full attention. An optional close button lets them dismiss without submitting.

Best for: Multi-step intake forms, application forms, any form that demands focus and shouldn't compete with page content.

What you configure in Filla:

  • Show close button: Toggle on or off. Turn it off for forms where abandonment is a concern and you want respondents to commit to completing the form.
  • Trigger button: Same as popup and slider modes.

How it works: The trigger button opens a fullscreen overlay that covers the entire page. The form renders inside the full viewport.

Example embed code:

<script
  src="https://filla.io/embed.js"
  data-form-id="your-form-id"
  data-mode="fullscreen"
  data-button-text="Start application"
></script>

When to use fullscreen: Long intake forms and applications where you want the respondent fully focused. This is the highest-commitment embed mode — use it when you've already qualified the visitor and they've indicated intent to complete the form.

Comparing the 4 embed modes

Mode Trigger Form Position Best for
Inline iframe None (form is always visible) Embedded in page flow Contact pages, landing pages
Popup Click button Centered modal overlay CTAs, lead capture, demo requests
Slider Click button Side panel (left or right) Feedback forms, support requests
Fullscreen Click button Entire viewport Multi-step intake, applications

How to embed a Filla form on WordPress

WordPress has several ways to accept HTML embeds. Here are the two most common:

  1. Open the WordPress page or post editor
  2. Click the + to add a new block
  3. Search for "Custom HTML" and select it
  4. Paste your Filla embed code (iframe or script snippet) into the block
  5. Click Preview to verify it renders correctly
  6. Click Update or Publish

This works for all four embed modes. The script tag version renders the form or the trigger button. The iframe version renders the inline form.

Method 2: Page builder (Elementor, Divi, Beaver Builder)

All major WordPress page builders have an "HTML" or "Code" widget.

In Elementor:

  1. Add a new element
  2. Search for "HTML"
  3. Drag the HTML widget onto your canvas
  4. Paste the embed code into the content field

In Divi:

  1. Add a new module
  2. Select "Code"
  3. Paste the embed code

In Beaver Builder: Use the "HTML" module in the same way.

WordPress-specific tips

The Classic Editor: Switch to the Text tab (not Visual) and paste the embed code directly into the HTML source.

Cache plugins: If you use a cache plugin (WP Super Cache, W3 Total Cache, WP Rocket), clear your cache after embedding. The form loads dynamically, so caching doesn't break submissions — but a stale page cache may not show the embed immediately.

Security plugins (Wordfence, etc.): Some WordPress security plugins block external script tags from unknown domains. If the script tag version doesn't render, try the iframe version instead. Alternatively, whitelist filla.io in your security plugin's external script settings.

HTTPS: Your WordPress site must be on HTTPS for embedded forms to work. Browsers block mixed content (HTTPS page with HTTP iframe). Filla forms are always HTTPS.

Choosing the right embed mode for your situation

You have a contact page. Use the inline iframe. The entire page purpose is the form, so showing it permanently makes sense.

You have a feature or product page with a "Request a demo" button. Use the popup. The page content is the primary focus. The form opens on demand.

You have a SaaS app or documentation site where users might need help while viewing content. Use the slider. The page stays visible while the form is open.

You have a multi-step application form that needs full attention. Use the fullscreen. It signals commitment and removes distractions.

You're sending an email. None of the above — use a direct link to the form. You can't embed iframes in email clients.

FAQ

Can I embed an Airtable form on WordPress without a plugin?

Yes. Use a Custom HTML block in Gutenberg (or the Code module in your page builder). Paste the iframe embed code and publish. No plugin needed. The form loads from Airtable or Filla and submits directly to your Airtable base.

How do I make an embedded Airtable form responsive on mobile?

Set width="100%" on your iframe. This makes the form fill its container on any screen size. For the height, either set a generous fixed value (e.g., 700px) or use Filla's script tag embed, which handles auto-resizing automatically. Native Airtable embeds with fixed heights create scroll-within-scroll problems on phones — switching to Filla avoids that.

Can I embed an Airtable form in a popup without coding?

With Filla, yes. Go to Share in the form editor, select the Popup embed mode, configure the button text and color, and copy the snippet. Paste it into any HTML block on your site. The trigger button and modal behavior are handled automatically — no JavaScript to write.

It shows in native Airtable form embeds. Filla forms don't show Airtable branding — you control the logo, favicon, and footer content.

Can I track form conversions in Google Analytics from an embedded form?

Yes. The simplest approach: configure your Filla form to redirect to a /thank-you page after submission. Then set up a GA4 conversion event on page views to that URL. Alternatively, Filla emits a postMessage event on successful submission — you can listen for that event in a script and fire a custom GA4 event without a page redirect.

Build your embeddable Airtable form →