You built a form. Now you need people to actually see it. The fastest way to do that is to embed the form on your website instead of only sharing a standalone link — visitors fill it out right where they already are, without a redirect that costs you conversions.
This guide walks through exactly how to embed a form on any website, whether you're running WordPress, Squarespace, Wix, Webflow, Shopify, or a hand-coded HTML site. No developer required.
In a hurry? Build your form with FormFlowX's free form builder, click Share → Embed, copy the code snippet, and paste it into your page's HTML. Takes under two minutes — see the full walkthrough below.
Why Embed a Form Instead of Linking to It
You can always share a form as a standalone link, and that works fine for emails and social posts. But when the form lives on your own site, embedding it beats linking out for a few concrete reasons:
- Fewer clicks, fewer drop-offs. Every extra click or page load between a visitor and your form loses a percentage of respondents. An embedded form removes that step entirely.
- Keeps your branding intact. Visitors stay on your domain, inside your layout, instead of bouncing to a third-party page that looks and feels different.
- Better for SEO and analytics. The form lives on a page you control, so you can track it in your own analytics setup and it counts toward that page's engagement signals.
- Fits naturally into context. A contact form at the bottom of your contact page, or a lead capture form inside a landing page, converts better than a form floating on its own.
How to Embed a Form on Any Website in 3 Steps
The process is nearly identical across every website builder and platform. Only the last step — where you paste the code — changes.
Step 1 — Build your form
Start from a blank form or a ready-made template. If you're not sure where to begin, FormFlowX has templates for the most common use cases: contact forms, lead capture forms, and client intake forms. Pick one, adjust the fields, and you're ready to publish.
Step 2 — Get the embed code
Once your form is published, open the Share panel and select Embed. You'll get a short snippet of HTML — usually an <iframe> or a small script tag — that renders your form wherever it's placed.
A typical form embed code — just an iframe pointing at your published form URL.
Step 3 — Paste the code into your website
Open the page where you want the form to appear, switch to the HTML or "embed code" block, and paste the snippet. Save and publish the page. That's it — the form now renders live on your site, and every submission still flows into your FormFlowX dashboard exactly as if someone had filled it out on the hosted link.
3 Ways to Embed a Form (Inline, Popup, Slide-in)
Not every form belongs in the same spot. Here are the three most common embed styles and when to use each:
Inline is the safest default for most sites — it doesn't interrupt the visitor and it's the easiest to embed correctly on the first try. Save popups and slide-ins for cases where the interruption is worth the added visibility, like a limited-time offer.
How to Add a Form to Website Builders (Platform-Specific)
Every major website builder supports pasting raw HTML somewhere on the page — you just need to know where to look.
WordPress
In the block editor, add a Custom HTML block wherever you want the form, paste your embed code, and update the page. If you use a page builder plugin like Elementor or Divi, look for an "HTML" or "Embed" widget instead.
Squarespace
Add a Code Block to the page (Insert → Code), paste the embed snippet, and save. Squarespace renders the iframe directly inside the code block.
Wix
Use the Embed a Widget → Custom Embeds → Embed HTML option from the Add panel, paste your code, and resize the embed frame on the page as needed.
Webflow
Drag an Embed element onto the canvas from the Add panel, paste the HTML snippet inside it, and publish. Webflow treats it as a self-contained HTML block, so your existing site styles won't interfere with the form.
Shopify
Edit the relevant page or section in the theme editor, add a Custom Liquid or HTML block, and paste the embed code. This works well for adding a lead capture or restock notification form to product pages.
Plain HTML site
If you're hand-coding your site, paste the iframe snippet directly into the page's HTML, anywhere inside the <body> tag. No build step or extra dependency required.
HTML Form Embed Code Example
Here's a complete, minimal example of an HTML form embed dropped into a page — this is roughly what you're pasting in every platform above:
Wrapping the iframe in your own section gives you full control over spacing and headings around the form.
Adding loading="lazy" is a small but useful detail — it defers loading the iframe until it's about to scroll into view, which keeps your page's initial load time fast.
Troubleshooting Common Embed Issues
The form looks cut off or has a scrollbar
This almost always means the iframe's fixed height is smaller than the form's actual content. Increase the height value, or use a form builder that supports auto-resizing embeds so the iframe adjusts to the form's length automatically.
The form doesn't appear at all
Check that the embed code was pasted into an actual HTML/code block and not a plain text block — most website builders will otherwise display the raw code instead of rendering it. Also confirm the form is published, not just saved as a draft.
The embed looks fine on desktop but breaks on mobile
Set width="100%" rather than a fixed pixel width, and avoid wrapping the iframe in a container with a fixed width smaller than the form's minimum layout width.
The form's colors or fonts don't match my site
An iframe embed renders the form's own styling, not your site's CSS — that's normal, and it's actually a feature, since it means your page's stylesheet can never accidentally break the form. If you want the look to match, change the theme colors and fonts inside the form builder itself rather than trying to override them from the parent page.
Best Practices for Embedded Forms
- Match your site's width. Use percentage-based widths so the form scales with your layout instead of overflowing or leaving awkward whitespace.
- Keep the form short where it's embedded inline. A long form feels more at home on its own dedicated page than squeezed into a sidebar.
- Test on mobile before publishing. Most form traffic on marketing pages is mobile — always preview the embed on a phone-sized viewport.
- Add a heading above the embed. An iframe on its own can look disconnected from the page; a short heading like "Request a quote" gives it context.
- Use conditional logic to keep it short. If your form needs to ask different questions to different visitors, use conditional logic instead of showing every field to everyone.
Build and embed your form in minutes
FormFlowX gives you a one-click embed code for any form — no iframe wrangling required. Free for up to 100 responses/month.
Frequently Asked Questions
Do I need to know how to code to embed a form?
No. You only need to copy a short snippet of code and paste it into your website builder's HTML or code block — you don't need to write or edit any code yourself.
Will an embedded form slow down my website?
An iframe embed loads independently of the rest of your page, so it has minimal impact on your site's load time, especially if the embed code uses lazy loading.
Can I style the embedded form to match my website?
Most form builders, including FormFlowX, let you customize colors, fonts, and button styles from the form editor itself, so the embed matches your site without needing custom CSS.
Where do form submissions go once the form is embedded?
Submissions are stored in your form builder's dashboard regardless of where the form is embedded. You can also connect notifications so you're alerted the moment someone submits.