Embedding a Form in Your Website: iframe or Link?
Embedding makes the experience seamless, but it comes with a few technical problems that, if you don't know about them, leave the form cut off on mobile.
There are three ways to put a form on your website, and each has its place.
1. A plain link
The user clicks a button and goes to the form page. The simplest and most trouble-free option.
Best for: long forms, exams, anything that needs focus.
2. An embedded iframe
The form is displayed inside your page. The user never leaves your site.
Best for: contact forms, newsletter sign-ups, short forms.
The main problem: height
An iframe has a fixed height, but the form's content changes: conditional logic adds a question, an error message appears, the page changes. The result is either an internal scrollbar (ugly, and bad on mobile) or a lot of empty space.
The fix: the form should report its real height to the host page with postMessage, and a script on the host should resize the iframe. If your form builder supports this, use its own embed code rather than a hand-written iframe.
The second problem: third-party cookies
Modern browsers restrict third-party cookies. If the form relies on cookies for saving drafts or for anti-spam, it may not work inside an iframe.
3. A pop-up (modal)
A button that opens the form in a layer over the page. It's a good blend of the previous two: the user doesn't leave the page, but the form has enough room.
On mobile it must go full-screen; otherwise the form is unusable in a small box in the middle of the screen.
Notes that apply to all three
- The host page's title should say what the form is. For SEO, content inside an iframe is not attributed to your page.
- If you've embedded the form, keep the standalone form page available too, so you can send its link separately.
- In WordPress, use a Custom HTML block instead of pasting HTML straight into the editor; the visual editor sometimes mangles tags.
SEO: iframe content isn't yours
Don't underestimate this point: Google does not attribute the content inside an iframe to the host page. If you expect your "Contact us" page to rank because of its form, you're mistaken. Meaningful text has to be on the page itself, not just inside the form.