How to Embed a Form on Any Website

Once you've finished creating an online form, the next question is almost always the same: how do you actually get it onto your website? The answer depends on what you want the form to do — sit inside an existing page, or stand on its own — and the mechanics are simpler than most people expect.

Two ways to put a form in front of people

Every form on the web reaches visitors one of two ways, and it's worth choosing deliberately rather than defaulting to whichever one you tried first.

• Inline embed — the form renders directly inside a page you already have, sitting alongside your content, navigation, and branding. This is the right choice for a contact page, a footer, a pricing page, or anywhere the form supports a page that already has a purpose.
• Shareable hosted link — the form lives on its own page, hosted for you, with nothing else on it. This is the right choice when the form *is* the destination: an email campaign, a QR code on a flyer, a link in a social media bio, or a survey you're sending directly to a list.

Most websites want the inline embed for anything tied to an existing page — a contact form template, for instance, belongs on your Contact page, not off on its own. Reach for the hosted link when there's no page to embed into, or when you specifically want a distraction-free page with nothing but the form on it.

How to embed a form: the general steps

Regardless of platform, embedding a form follows the same three-step pattern. The specifics of step three vary by site builder, which we cover below.

1. 1Publish your form. A draft form can't be embedded — publish it first so it has a live, working version to point to.
2. 2Open Share and copy the embed code. Once published, look for a Share or Embed option next to your form. It will give you a short snippet — typically an iframe — along with a plain hosted link.
3. 3Paste the snippet into your page. Drop the embed code into the HTML of the page where you want the form to appear. On most modern site builders, this means adding an HTML or embed block at the right spot in the page editor.

Embedding on common platforms

The underlying mechanism — an iframe pointed at your published form — is identical everywhere. What changes is where you paste it.

• WordPress — add a Custom HTML block (block editor) or an HTML widget (classic themes) to the page or post, then paste the embed code inside it.
• Webflow — add an Embed element to the page, drop it where you want the form to sit, and paste the code into the embed element's code panel.
• Squarespace — add a Code Block to the page section, switch it to HTML, and paste the embed code in.
• Plain HTML site — paste the snippet directly into your page's markup, wherever the form should render.
• Notion, Linktree, and similar link-in-bio tools — these generally don't support raw HTML embeds, so use the hosted link instead of the inline embed code.

If your platform doesn't support custom HTML or embed blocks at all, that's a sign to use the shareable link — either as a plain hyperlink or as a button that points to it.

Make sure it's responsive

A form embed should resize to fit the width of whatever container it's placed in, and stack cleanly on a phone screen rather than forcing horizontal scrolling. This is the default behavior for a well-built embed — you shouldn't need to hand-tune width or height in most cases. If your form ever renders with a fixed pixel width that overflows on mobile, that's the one thing worth checking in your embed code or the page column it sits in.

Don't let the embed slow your page down

An iframe embed only loads the form itself, not your entire page, so it shouldn't meaningfully affect your site's load time. The things that *do* hurt page speed are avoidable: stacking multiple heavy embeds on one page, placing the form above content that should load first, or embedding on a page that's already overloaded with scripts. Keep the page around the form lean, and the form embed itself won't be the bottleneck.

Always test on a real phone

Preview windows in site builders don't always reflect how an embed behaves on an actual device. Before you consider the job done, open the live page on your own phone and check that fields are tappable, the keyboard doesn't cover the field you're typing into, and the whole form is reachable without pinch-zooming. Mobile is where embedded forms most often break, and it's also where a large share of your traffic will encounter it — see reduce form abandonment for more on why this matters for completion rates.

When to use a hosted link instead

Skip the embed entirely and just share the link when: you're sending the form by email or DM, putting it behind a QR code, linking to it from a social bio, or you want a clean, full-page experience with no site navigation competing for attention. A hosted link also comes in handy as a fallback — if you're not sure an embed will render correctly on a given platform, the link always works.