Embed a form on your site

Drop a JomForm form into any website with an iframe. The embed renders the full form (fields, validation and payment) and submits straight into your form's submissions and sales. The buyer is taken to the top frame for CHIP checkout and the thank-you page — so payment works inside the embed.

Use the embed URL below — not the form's ordinary public URL. The public URL is same-origin only: it answers X-Frame-Options: SAMEORIGIN, so a browser refuses to frame it on your site and shows an empty or broken frame. The embed URL is the one that is allowed to be framed from your domain.

1. Paste the embed snippet

Turn on Allow embedding (iframe) in the form's settings, then paste this on your page. Replace your-workspace and your-form-slug with your workspace slug and the form's slug.

<iframe src="https://yourworkspace.jomform.com/embed/f/your-workspace/your-form-slug"
        style="width:100%;height:640px;border:0"
        title="Your form"></iframe>

With embedding switched off, that address answers 403 instead of rendering the form — the setting is what makes the iframe work, so turn it on before you paste.

2. Auto-height (recommended)

A fixed height causes inner scrollbars on longer forms. The embedded form posts its height to your page on load, on resize and whenever its content changes (conditional fields, product selection, the confirmation message after submit). Add this 3-line listener so the iframe grows and shrinks with the form — no inner scrollbars:

<iframe src="https://yourworkspace.jomform.com/embed/f/your-workspace/your-form-slug"
        style="width:100%;height:640px;border:0"
        title="Your form"></iframe>

<script>
addEventListener("message", e => {
  if (e.data?.type === "jomform:height") document.querySelector("iframe").style.height = e.data.height + "px";
});
</script>

Without the listener nothing breaks: the iframe keeps whatever height you set in CSS (640px in the snippet above), and longer forms scroll inside the frame.

The message contract

Field	Meaning
type	Always "jomform:height" — filter on this so your other postMessage listeners ignore it.
height	The form's content height in pixels. Set it as the iframe's CSS height.

The form only posts when it is actually inside a frame — a direct visit to the form URL is unaffected.

Sandboxed iframes

Plain iframes like the snippet above work as-is. If you add a sandbox attribute, include allow-forms, allow-scripts, allow-same-origin and allow-top-navigation so the form can submit and the buyer can reach CHIP checkout in the top frame.

CORS

No CORS configuration is needed. The form's JavaScript posts to location.pathname + "/order" — same-origin inside the iframe (the iframe document is JomForm), so the browser never makes a cross-origin request.

Private forms and cookies

Rendering and submitting a published form are cookieless. A private form is the one exception: its buyer enters an access password, and the gate (which also posts to location.pathname + "/unlock", so it works inside the embed just like the button does) sets a signed access cookie so the frame can render the form instead of asking again. That cookie is scoped to the one page it was entered on — it is a Partitioned third-party cookie, so unlocking the embedded form on your site does not unlock it on anybody else's. Partitioning is also what keeps that unlock working when a visitor's browser blocks third-party cookies: the cookie is stored per top-level site, so your page keeps it and the buyer is not asked for the password again. A browser that does not support partitioned cookies yet ignores the attribute and treats it as an ordinary third-party cookie, which such a browser may refuse to store — a buyer who is asked again can always open the form's own URL directly.

Related: see the customization guide to brand the embedded form with your own colours, CSS and JS.

Why not the plain form URL?

The form's ordinary public URL is meant to be opened directly, so JomForm sends it the standard X-Frame-Options: SAMEORIGIN header — a browser will not render it inside a frame on a different domain, and depending on the browser you get an empty frame or a refusal. That is a deliberate protection against a page wrapping JomForm in an invisible frame to trick a buyer into clicking something, so it is not something to work around by other means:

<iframe src="https://yourworkspace.jomform.com/your-form-slug"
        style="width:100%;height:640px;border:0"
        title="Your form"></iframe>

The embed URL above exists for exactly this case and is the only address that is framable from your site. If you need your form on your own page, always use the embed URL.