There are two ways to put a form in front of people: send them to its own hosted page, or embed it directly into a page you already run. Both are valid, and choosing well matters more than most people think.
A hosted link is faster to share and works anywhere. An embed keeps people on your site, inside your design, without a jump. For a form on your homepage or a landing page, the embed usually wins.
When to embed and when to link
Reach for a link when the form travels — in a bio, a DM, an email, a QR code on a flyer. Reach for an embed when the form belongs on a specific page you control and you want it to feel native to that page.
- Link: sharing widely, or where you have no site to embed into.
- Embed: a contact section, a booking page, a landing page.
- Both: a hosted link for the wild, an embed for your own site.
Keep it seamless, not bolted on
A badly embedded form looks like a foreign object — a boxed-in frame with its own scrollbar and mismatched colours. A good embed inherits enough of your look that visitors barely notice the seam. Match the styling and let it size to its content.
Hide chrome you do not need inside the embed, so the page around it stays the star.
Do not break the mobile page
The most common embed failure is a form that behaves on desktop and overflows on a phone. Since most visitors are on a phone, test there first. A responsive embed that flexes to the screen is not optional.
- Check the embed on a real phone, not just a narrowed window.
- Make sure it resizes instead of forcing a sideways scroll.
- Confirm payment and submission work inside the frame.
One form, many placements
The quiet advantage of a hosted form you can embed is that there is one source of truth. Update the form once and every place it appears — your site, your link, your emails — updates with it. No re-pasting, no drift.
You can build a form and embed it on your own site with a snippet, free, at onesol.io/forms.
The Clean iframe, Step by Step
A form embedded well looks like a native part of your page; embedded carelessly it looks like a window cut into your site with someone else's furniture showing through. The trick is to embed the form in its bare state, without the surrounding page chrome and branding. With OneSol you do this by loading the form in embed mode — the same link with the embed flag — which strips the badge and page frame so only the fields remain.
The mechanics are a single iframe. Drop the embed URL into an iframe set to full width, remove the default border so there's no boxed-in outline, and let it sit inside your own layout as though you'd built the fields yourself. No script libraries, no account plumbing on your side — the form runs on OneSol and simply appears in your page.
Because the form is only borrowed, not copied, it stays live. Change a field, adjust the pricing or update the confirmation on OneSol, and the embedded version reflects it instantly with nothing to re-paste on your site. That is the whole appeal of embedding over rebuilding the form by hand — one source, everywhere it appears.
Solve the Height Problem Before It Bites
The single most common embed fault is height. Set the iframe too short and the bottom of the form is clipped or trapped behind an inner scrollbar; leave it at a browser default and you often get the dreaded scrollbar-within-a-scrollbar that makes the whole thing feel broken. Give the iframe a generous fixed height, or better, a comfortable min-height, so the form has room to breathe on the longest expected view.
Remember that a form's height is not constant. Conditional fields that appear when someone makes a choice make the form taller mid-fill, and a validation error that adds a red line pushes everything down too. If you've hard-coded a height that just fits the initial state, those additions get cut off exactly when the visitor needs to see them — so err on the tall side and let the page scroll, not the iframe.
Test the extremes, not just the default. Open a branch that reveals extra fields, trigger an error message, and view it on a narrow phone where everything stacks taller — if the form is still fully visible and only the page scrolls, your height is right. A quick check here prevents the most-reported embed complaint there is.
Match Your Site and Check It on Every Platform
Most site builders take an embed the same way, through a block meant for raw HTML — you're just looking for the right one. In WordPress it's the Custom HTML block; in Squarespace, a Code block; in Wix, the Embed HTML element. Paste the iframe there rather than into a normal text area, which will show the code as text instead of rendering the form.
Blend it into the surrounding page so it doesn't read as a bolt-on. Nudge the form's colours towards your site's, keep the width in line with your content column, and leave a little breathing space above and below so it sits like a section rather than an intrusion. The goal is that a visitor never registers they've crossed onto another service — they just see your form and fill it in.
Then do the boring, essential check: submit a real test entry from the embedded form and confirm it lands and the confirmation shows. It is easy to style an embed perfectly and never verify it actually works in place, particularly on mobile where a cramped iframe can hide the submit button entirely.
- WordPress: Custom HTML block — not the paragraph editor
- Squarespace: a Code block; Wix: the Embed HTML element
- Give the iframe full width, no border, generous min-height
- Submit a real test entry — on desktop and on a phone