Embed with an iframe

An iframe is the simplest and most isolated embed method. It works with the default oy.fm URL, an Onlyform subdomain, or a connected custom domain.

Basic iframe

Replace FORM_URL with the exact public URL copied from the Share page:

<iframe
  src="FORM_URL"
  title="Contact us"
  loading="lazy"
  style="width: 100%; height: 600px; border: 0;"
></iframe>

For example:

<iframe
  src="https://forms.example.com/contact-us"
  title="Contact us"
  loading="lazy"
  style="width: 100%; height: 600px; border: 0;"
></iframe>

Illustration of an Onlyform form embedded inside a webpage — A standard iframe stays within the surrounding page content.

Responsive sizing

Use a container when the form should adapt to the available width:

<div style="width: 100%; min-height: 600px;">
  <iframe
    src="https://oy.fm/FORM_ID"
    title="Product feedback"
    loading="lazy"
    style="display: block; width: 100%; height: 600px; border: 0;"
  ></iframe>
</div>

Use a fixed pixel height when the surrounding page controls scrolling. Use 100vh for a viewport-sized form:

<iframe
  src="https://oy.fm/FORM_ID"
  title="Application form"
  style="position: fixed; inset: 0; width: 100%; height: 100vh; border: 0;"
></iframe>

CSS height: auto does not automatically resize a cross-origin iframe to match its document. Use an explicit height unless your site implements its own resize messaging.

Pass hidden fields and UTM values

Append declared hidden fields and enabled UTM parameters to the iframe URL:

<iframe
  src="https://forms.example.com/contact-us?account_id=acct_123&utm_source=docs"
  title="Contact us"
  style="width: 100%; height: 600px; border: 0;"
></iframe>

URL-encode dynamic values with URLSearchParams instead of concatenating untrusted text:

const url = new URL('https://forms.example.com/contact-us')
url.search = new URLSearchParams({
  account_id: currentAccountId,
  campaign_id: 'summer-2026',
}).toString()

document.querySelector('#contact-form').src = url.toString()

Recommended attributes

Attribute	Recommendation
`title`	Required for accessibility. Describe the form’s purpose.
`loading`	Use `lazy` for forms below the fold. Omit it for the main above-the-fold interaction.
`width`	Usually `100%`.
`height`	Use an explicit pixel or viewport value.
`border`	Set to `0` when the surrounding page supplies the frame styling.
`allow`	Add only browser capabilities the form actually needs.

If your site uses Content Security Policy, allow the selected form hostname in frame-src. See Troubleshooting.

Get started

Reference

Basic iframe

Responsive sizing

Pass hidden fields and UTM values

Recommended attributes

​Basic iframe

​Responsive sizing

​Pass hidden fields and UTM values

​Recommended attributes

Basic iframe

Responsive sizing

Pass hidden fields and UTM values

Recommended attributes