> ## Documentation Index
> Fetch the complete documentation index at: https://docs.onlyform.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Embed with an iframe

> Place a published form directly inside any HTML page without widget JavaScript.

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:

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

For example:

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

<Frame caption="A standard iframe stays within the surrounding page content.">
  <img src="https://mintcdn.com/onlyform/ax51_ngskpU7Lxw6/images/widgets/embed-preview.png?fit=max&auto=format&n=ax51_ngskpU7Lxw6&q=85&s=cf8fa2c999afda737565eee698bc77aa" alt="Illustration of an Onlyform form embedded inside a webpage" width="1508" height="943" data-path="images/widgets/embed-preview.png" />
</Frame>

## Responsive sizing

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

```html theme={null}
<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:

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

<Warning>
  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.
</Warning>

## Pass hidden fields and UTM values

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

```html theme={null}
<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:

```js theme={null}
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](/widgets/troubleshooting#content-security-policy).