Embedded Form
An embedded form is a lead-capture form built in one tool and inserted into another page using an iframe or a snippet of code.
Key takeaways
- Iframes guarantee consistent rendering; script embeds inherit the host page's styles and conflicts.
- An iframe needs a postMessage handshake to resize with its own content.
- A distinct source parameter per host is what makes submissions attributable later.
- Consent banners and content security policies can block the embed from loading at all.
- The publisher controls placement and speed, so identical embeds perform unevenly across domains.
In depth
An embedded form separates where a form is built from where it is displayed. The source platform hosts the fields, validation and submission endpoint; the host page loads them either inside an iframe, which isolates styles and scripts, or through a JavaScript snippet that injects markup into the host document. Submissions travel back to the source platform rather than the host, and parameters appended to the embed, such as a partner identifier or campaign tag, arrive as hidden values on the record.
The choice between the two methods sets most of the trade-offs. An iframe renders identically everywhere and cannot be broken by the host's CSS, but it needs a postMessage handshake to resize with its content and it cannot inherit the surrounding typography. A script embed looks native and resizes naturally, yet inherits every style conflict and content policy the host page carries. Third-party cookie restrictions, consent banners that block scripts until acceptance, and strict content security policies all reduce what either method can do.
In practice, teams use the script embed on properties they control and the iframe everywhere else, especially on partner and affiliate sites where no one can promise a stable stylesheet. Each partner gets the same snippet with a distinct source parameter so submissions carry their origin. The pattern suits a scorecard well: the full quiz runs inside the embed on a partner's article, and every completion, score and lead lands in one account regardless of which domain hosted it.
An embed cannot control the page around it. Placement, above-the-fold position, page speed and whether the host's consent banner ever releases the script are all decisions the publisher makes, so identical embeds perform very differently across domains. Analytics inside an iframe do not share the host's session, which complicates attribution to the visitor's earlier journey. Availability becomes shared too: an outage on the source platform shows up as a broken section on someone else's site.
Example in practice
How to measure it
Measure the embed itself before the leads. Log a load event when the form renders and a start event on first interaction, then read completion as submissions divided by loads for each host domain separately. A domain with many loads and almost no starts usually has a placement or blocking problem, not an offer problem, and load failures reveal consent banners or policies preventing the script from running.
Then compare quality by origin. Group submissions by the source parameter and track qualification rate, duplicate rate and downstream conversion per host, since a partner sending volume with poor fit costs more than one sending less. Watch render time as well, because an embed loading late on a slow host page loses visitors before the first field is ever visible.
Common mistakes
The first failure is sizing. A fixed-height iframe produces an inner scrollbar or a cut-off submit button on phones, and visitors interpret the result as a broken page rather than a long form. Implement the resize handshake so the frame reports its content height, set a responsive width, and test on a narrow viewport with the browser's device emulation before sending the snippet to anyone outside the team.
The second is shipping one identical snippet to every partner. Without a source parameter in the embed URL, and with cross-domain cookies increasingly blocked, submissions arrive with no origin and the whole programme looks like direct traffic. Generate a per-partner snippet, pass the identifier as a hidden field, and reconcile against the partner's own reporting so a disagreement is visible before commission season.
Frequently asked questions
Do embedded forms work on partner or third-party sites?
Yes, that is one of their main strengths. You share a snippet, the partner pastes it into their page, and all submissions report back to your central platform with source attribution intact.
What technical issues should I watch for with embeds?
iframes can conflict with responsive layouts, cookie consent tools, and cross-domain tracking. Always test the embed on multiple devices and on each host site before launching a campaign.
Should I use an iframe or a JavaScript snippet?
Use a script embed on sites you control, where inheriting the page's typography makes the form feel native and you can fix any style conflict. Use an iframe on partner sites and anywhere you cannot audit the CSS, because isolation prevents the host from breaking the form. The cost of the iframe is the resize handshake and a look that may not match the page.
Why is my embedded form cut off or scrolling inside its own box?
The iframe has a fixed height that no longer matches its content, which happens as soon as validation messages or conditional fields expand it. Implement the platform's resize script so the frame posts its content height to the parent page, and give the container a percentage width. Test at a narrow viewport, since the problem usually appears only on phones.
How do I know which site a submission came from?
Pass an identifier in the embed URL and store it as a hidden field on every record, rather than relying on the referrer or on cookies, both of which are frequently stripped. Give each partner a unique snippet so the value cannot be copied by accident. Add campaign parameters the same way if partners run paid traffic to the page.
Do embedded forms work with cookie consent banners?
Only if the host's consent tool allows the script category the embed belongs to. Many banners block third-party scripts until a visitor accepts, so the form simply never appears for anyone who ignores the prompt. Ask partners which category the embed is classified under, and prefer an iframe that functions without setting non-essential cookies where the offer allows it.
Can I style an embedded form to match the host site?
With a script embed, yes, because the injected markup inherits the page's fonts and colours and you can expose class names for overrides. With an iframe you control styling only from the source platform, so you match the host manually through theme settings passed as parameters. Agree on fonts and button colour with the publisher rather than guessing from a screenshot.
How is an embedded form different from an inline form?
Inline describes position, embedded describes origin. An inline form sits in the flow of the page's content, and it may be native markup or an embed. An embedded form is built in another tool and inserted, whether it appears inline, in a sidebar, or inside an overlay. Most partner-facing forms are both: embedded in origin and inline in placement.