How to embed forms on external sites (iframe forms)

You build forms in a specialized form tool. Now you need to put that form on your website. You cannot copy and paste the code if your website uses a different platform. You embed it. An embedded form appears on your site but lives somewhere else.

This article covers how to embed forms, how iframes work, cross-domain security, and common problems with embedded forms.

What is an embedded form?

An embedded form is a form that lives on one server but appears on another website. The form is hosted at wemasy.com but displays on your site using an iframe like <iframe src="https://wemasy.com/form/abc123"></iframe>.

The iframe creates a window into another page. That page contains the form. To the user, it looks like the form is on your site. Technically, it is a separate page inside a container.

How iframes work

An iframe is an inline frame. It loads a completely separate page inside your page. That separate page has its own HTML, CSS, and JavaScript. It is sandboxed, meaning it cannot access your page or vice versa.

Iframes offer security isolation where the form tool cannot access your page data, your page cannot access the form data, and if the form crashes, it does not crash your page. However, iframes have disadvantages including limited direct communication between the page and form, potential SEO impact (Google may not index form content), slower load times, and lack of cross-domain cookie support.

Embedding a form using an iframe

Most form builders provide an embed code like <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Copy and paste this code into your website HTML to display the form inside the container. A common issue is that fixed height causes scrolling problems. If the form is longer than the height you set, the form scrolls inside the iframe (bad experience). You have to know the form's exact height, but forms grow and shrink based on conditional logic, so the height is not fixed. The solution is to use auto-resizing iframes with postMessage to communicate between the iframe and the parent page. When the form changes size, it tells the parent page to resize the iframe. The parent page JavaScript listens for messages from the iframe using window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. The form inside the iframe sends a message with its height using parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, so the iframe automatically expands to fit the form content.

Cross-domain security

iframes are sandboxed for security. The form cannot access your page's data. Your page cannot access the form's data. This is good.

Be careful with the sandbox attribute on <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. The sandbox attribute restricts what the iframe can do. Allow-same-origin lets the iframe access cookies and session storage, allow-scripts lets JavaScript run, and allow-forms lets the form submit. Only enable sandbox permissions you actually need, as the default (all permissions denied) is most secure but breaks most forms.

Form submission with embedded forms

When the user submits a form inside an iframe, the submission happens inside the iframe and the form sends data to the form builder's server (not your server). Your server never sees the form data, as the form tool stores it and you retrieve it later via an API or email notification. If you need more control, you have to intercept the submission. This requires the form tool to send a postMessage to the parent page using window.parent.postMessage({ type: 'submit', data: formData }, origin);, then the parent page can do something with the data (send it to your server, show a custom thank you page, etc.).

Mobile considerations for embedded forms

On mobile, iframes can be problematic. The form is smaller and harder to interact with. The iframe might not resize properly if it does not support auto-resizing.

A better approach on mobile is to link to a full-page form instead of embedding an iframe. Detect viewport size and show a link button on mobile, but embed on desktop using if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Open form</a>'; } else { // embed the iframe }.

Performance impacts of embedded forms

iframes add overhead. Every iframe is a separate HTTP request. It loads its own HTML, CSS, and JavaScript. This slows down your page.

Load the iframe lazily by not loading it until the user scrolls near it using <iframe data-src="https://..." style="display: none"></iframe> and window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. The iframe only loads when the user is about to see it.

When to use embedded forms vs alternatives

Use embedded forms when you cannot customize your website (Wix, Squarespace, etc.) or you want to keep the form tool separate from your site.

Use native forms when you control your website and want performance. A form built on your own tech stack loads faster and integrates better.

Use hosted (standalone) forms when you want simplicity. A form on the builder's domain is easiest to set up but looks less professional.

How WEMASY handles embedded forms

WEMASY forms can be embedded on external sites using iframes with auto-resizing support. Forms are optimized for all device sizes. You can receive submissions in your WEMASY dashboard, via email, or via webhooks.

See embedding options in your WEMASY plan.

Frequently asked questions