Embedding Airtable Forms on Your Website
You have an Airtable base. You need a form on your website that feeds data into it. This guide covers exactly how to do that, the tradeoffs of each approach, and the code snippets you need.
Two main options: embed Airtable's native form, or use a third-party builder like Filla that gives you control over how the form looks and behaves.
Want embeddable forms that look good? Filla creates branded Airtable forms you can embed anywhere. Start free →
Option 1: Embedding a native Airtable form
How to get the embed code
- Open your Airtable base
- Click into a form view (or create one under the Views panel)
- Click Share form in the top right
- Select Embed this form
- Copy the iframe code
It looks like this:
<iframe
class="airtable-embed"
src="https://airtable.com/embed/shrXXXXXXXXXXXXXX"
frameborder="0"
onmousewheel=""
width="100%"
height="533"
style="background: transparent; border: 1px solid #ccc;"
></iframe>
Paste that into any HTML page and the form loads inside it. Submissions go directly into your Airtable table. It works.
The problems with native Airtable embeds
The embed works, but there are real frustrations once you move past basic use cases.
No styling control. The form looks exactly like Airtable's form view. You can pick a cover image and a background color, but that's the limit. You can't change the font, adjust field widths, or make it match your website's design system.
Airtable branding is always visible. The "Powered by Airtable" footer appears on every embedded form. On a polished marketing site, this stands out.
Fixed iframe height. The embed code uses a fixed pixel height (height="533"). If your form is longer, it scrolls inside the iframe. If it's shorter, you get blank space. There's no native auto-resize. You have to manually adjust the height and guess.
Clunky on mobile. A fixed-height iframe with internal scrolling is particularly painful on phones. Users scroll the page, accidentally scroll inside the iframe, get confused, and leave.
No custom thank-you page. After submitting, users see Airtable's default confirmation message. You can customize the text, but you can't redirect them to a specific URL on your site.
Limited field types. Some Airtable field types don't render properly in the embedded form. Linked record fields in particular become plain text inputs, meaning users type free text instead of selecting from your actual records.
For internal tools or quick prototypes, the native embed is fine. For anything client-facing, the limitations add up quickly.
Option 2: Using Filla for embedded forms
Filla is a form builder built specifically for Airtable. It connects to your base via OAuth, reads your fields directly, and gives you a form you can embed anywhere with full control over how it looks.
What you get with Filla embeds
Branded forms. Set your colors, upload your logo, and choose fonts that match your site. The form looks like part of your website, not a third-party tool dropped in.
Responsive layout. Filla forms are responsive by default. They resize correctly at any viewport width without iframe scrolling issues.
Custom thank-you redirects. After submission, redirect users to any URL. A confirmation page, a scheduling link, a content download. You control what happens next.
Auto-resize. Filla's embed script handles iframe height automatically. The iframe grows and shrinks with the form content.
Full field support. Linked record fields render as search pickers connected to your actual Airtable tables. All standard field types work correctly.
Getting your Filla embed code
After building your form in Filla, go to Share and you'll see two embed options.
Option A: Script tag (recommended). This handles auto-resize automatically.
<script
src="https://filla.io/embed.js"
data-form-id="your-form-id"
data-width="100%"
></script>
Drop this anywhere in your page HTML and it renders the form inline. The script handles sizing, mobile responsiveness, and submission state.
Option B: iframe. If you can't use script tags (some CMS platforms restrict them), use the iframe directly.
<iframe
src="https://filla.io/f/your-form-id"
width="100%"
height="600"
frameborder="0"
style="border: none; border-radius: 8px;"
></iframe>
With the iframe option, you'll want to set the height manually or use the resize snippet (covered below in the best practices section).
Platform-specific setup
WordPress
Use a Custom HTML block in the Gutenberg editor.
- Add a new block
- Search for "Custom HTML"
- Paste your embed code (script tag or iframe)
- Preview and publish
If you're on a host that caches aggressively, clear your cache after publishing. The form itself loads dynamically, so caching shouldn't break submissions, but a stale page cache might show an old version of the surrounding content.
Classic editor (non-Gutenberg): switch your post to Text view and paste the embed code directly into the HTML.
Webflow
- In the Webflow Designer, drag an Embed element onto your page
- Double-click it to open the HTML embed editor
- Paste your script tag or iframe code
- Click Save & Close
Webflow supports both script tags and iframes in embed elements. Script tags work in published sites. They do not run in the designer preview.
One thing to watch: Webflow's embed element has a fixed container size in the designer. Set the embed element's height to auto in the style panel if you want it to expand with the form content.
Squarespace
Squarespace uses Code Blocks for custom HTML embeds.
- Edit your page
- Click the + to add a block
- Search for "Code"
- Paste your iframe code
Note: Squarespace 7.1 restricts external scripts on certain plans. If the script tag version doesn't render, use the iframe version instead. It works on all plans.
Squarespace also has a built-in Form block, but that sends submissions to email or Google Sheets, not Airtable. The Code Block + iframe approach is the right one here.
React / Next.js
Use an iframe component. There's no special SDK needed.
export default function AirtableForm() {
return (
<iframe
src="https://filla.io/f/your-form-id"
width="100%"
height="600"
style={{
border: "none",
borderRadius: "8px",
}}
title="Contact Form"
/>
);
}
For auto-resizing in React, listen for the message event from the iframe:
import { useEffect, useRef } from "react";
export default function AutoResizeForm() {
const iframeRef = useRef(null);
useEffect(() => {
const handleMessage = (event) => {
if (event.origin !== "https://filla.io") return;
if (event.data?.type === "resize" && iframeRef.current) {
iframeRef.current.style.height = `${event.data.height}px`;
}
};
window.addEventListener("message", handleMessage);
return () => window.removeEventListener("message", handleMessage);
}, []);
return (
<iframe
ref={iframeRef}
src="https://filla.io/f/your-form-id"
width="100%"
height="600"
style={{ border: "none", borderRadius: "8px" }}
title="Contact Form"
/>
);
}
Filla sends a postMessage with the form height whenever the content changes. This component listens for those messages and updates the iframe height accordingly.
Plain HTML
The simplest possible implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact</title>
</head>
<body>
<div style="max-width: 680px; margin: 0 auto; padding: 40px 20px;">
<h1>Get in touch</h1>
<script
src="https://filla.io/embed.js"
data-form-id="your-form-id"
data-width="100%"
></script>
</div>
</body>
</html>
That's all you need. The script renders the form, handles sizing, and manages submission state.
Embed best practices
Iframe height: fixed vs. auto-resize
Fixed height is the simplest approach. Set it to something larger than your form and accept the blank space.
<iframe src="..." width="100%" height="800" frameborder="0"></iframe>
Auto-resize is better for user experience but requires either using a script-tag embed or listening for postMessage events (as shown in the React example above). Use auto-resize for forms with conditional logic, since showing and hiding fields changes the form's height.
Mobile responsiveness
Set width="100%" on every embed. Never set a fixed pixel width.
Also confirm your container isn't wider than the viewport. A form inside a max-width: 1200px container that doesn't have horizontal padding will press against screen edges on mobile. Wrap your embed in a container with padding: 0 16px on small screens.
Loading states
The script tag embed renders progressively, so there's no blank flash. With iframes, there can be a brief white rectangle before the form loads. To handle this, show a placeholder while the iframe loads:
<div style="position: relative; min-height: 400px;">
<div
id="form-loading"
style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #888;"
>
Loading form...
</div>
<iframe
src="https://filla.io/f/your-form-id"
width="100%"
height="600"
frameborder="0"
onload="document.getElementById('form-loading').style.display='none'"
></iframe>
</div>
The onload attribute hides the placeholder when the iframe finishes loading.
Custom thank-you page vs. in-form confirmation
In-form confirmation (a success message inside the form) is simpler and works for most cases.
A custom thank-you redirect is better when:
- You want to track conversions with analytics (page views on
/thank-youare easier to track than iframe events) - You want to show specific next steps based on what someone submitted
- You're running paid ads and need a redirect URL for conversion tracking
Filla supports both. Set the redirect URL in your form's Settings panel under "After submission."
When to use a link instead of an embed
Not every form needs to be embedded. Some work better as a full-page link.
Use a link (not an embed) when:
- The form is long. Anything over 15-20 fields is hard to use inside an iframe on mobile.
- The form is multi-step with complex branching. Users need the full viewport for long multi-page flows.
- You're sending an email with a form link. You can't embed an iframe in email anyway.
- You want a clean, dedicated URL to share socially or in ads.
- The form asks for file uploads. Large file drag-and-drop works poorly inside an iframe.
Use an embed when:
- The form lives on a marketing page, contact page, or landing page
- You want users to stay on your site after submitting
- The form is relatively short (under 10 fields)
- You're A/B testing conversion on a specific page
A good middle ground: embed a short lead-capture form (name, email, message) on your site, and link to the full intake form from the confirmation screen.
FAQ
Will an embedded form work on mobile?
A Filla embed works fine on mobile. The script tag version is responsive by default. With an iframe, set width="100%" and test the height. The main issue with native Airtable embeds on mobile is the fixed-height iframe creating a scroll-within-scroll problem. Filla's auto-resize avoids this.
Does embedding a form slow down my page?
The form iframe loads from a separate domain, so it doesn't block your page's main content from rendering. The script tag version loads asynchronously. If page speed is critical, add loading="lazy" to the iframe so it only loads when the user scrolls to it:
<iframe src="..." width="100%" height="600" loading="lazy" frameborder="0"></iframe>
Can I put multiple forms on the same page?
Yes. Give each iframe or script tag its own unique data-form-id or src. They load independently and don't interfere with each other. If you're embedding two or more forms on one page, make sure each has a unique container ID if you're doing any JavaScript targeting.
How do I track form submissions in Google Analytics?
With a redirect to a thank-you page, track it as a page view conversion in GA4. Set up a conversion event for page views on /thank-you.
Without a redirect, use postMessage to detect submission:
window.addEventListener("message", (event) => {
if (event.origin !== "https://filla.io") return;
if (event.data?.type === "submission") {
gtag("event", "form_submit", {
event_category: "Forms",
event_label: "Contact Form",
});
}
});
Filla emits a submission event via postMessage on successful form submit.
Why is my embedded form showing a blank white box?
A few possible causes:
- HTTPS mismatch: Your page is HTTPS but the form URL is HTTP, or vice versa. Most browsers block mixed content. Make sure both URLs use HTTPS.
- Content Security Policy (CSP): Your site's CSP headers may block iframes from external domains. Add
frame-src https://filla.ioto your CSP. - Ad blocker: Some ad blockers block iframes from third-party domains. Test in a private window without extensions.
- Wrong form ID: Double-check the form ID in the embed URL. A 404 from the form server renders as a blank iframe.
Create your first embeddable form →