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

# Embed on your website

> Copy the iframe snippet from the Embed Code tab and paste it into your site's HTML to show a Survey or Quiz on your own page.

The **Embed Code** tab gives you a ready-made iframe. Paste it into the HTML of your page and your form appears there, without sending visitors away.

<Frame caption="Open Embed Code to copy the iframe snippet and check Website Preview.">
  <video autoPlay muted loop playsInline className="w-full" src="https://mintcdn.com/formai-app/XBaZxbZCaxkDZx0d/videos/share-embed.mp4?fit=max&auto=format&n=XBaZxbZCaxkDZx0d&q=85&s=873aff363703893ccdeab61186cb5155" aria-label="Opening the Share tab and choosing Embed Code, showing the iframe snippet with a Copy button and the Website Preview" data-path="videos/share-embed.mp4" />
</Frame>

## Embed your form

<Steps>
  <Step title="Publish the form">
    Click **Publish** in the editor's top bar. See [Publish and share](/user-guide/share/publish-and-share).
  </Step>

  <Step title="Open Embed Code">
    Click **Share**, then choose the **Embed Code** tab.
  </Step>

  <Step title="Copy the code">
    Click **Copy** to copy the snippet.
  </Step>

  <Step title="Paste it into your HTML">
    Paste the snippet where you want the form to appear. The form shows up as soon as the page loads.
  </Step>
</Steps>

## The snippet

The snippet is a standard iframe. Your form's id replaces the placeholder in this example:

```html theme={null}
<iframe src="https://ui.formai.app/to/YOUR_FORM_ID" width="100%" height="600"></iframe>
```

Always copy the snippet from the **Embed Code** tab rather than typing the id yourself.

## Sizing tips

* **Width:** keep `width="100%"` so the form fills the space of the column or section it sits in.
* **Height:** the snippet starts at `height="600"`. Increase the number if the form is cut off, or reduce it if there is empty space below the form.
* **Check both screen sizes:** view the page on desktop and on a phone after you embed.

Use **Website Preview** on the Embed Code tab to see how the form looks inside a page before you paste it.

## Next steps

<CardGroup cols={2}>
  <Card title="Publish and share" icon="share-nodes" href="/user-guide/share/publish-and-share">
    Share your form with a link instead.
  </Card>

  <Card title="Email button" icon="envelope" href="/user-guide/share/email-button">
    Add a call-to-action button to an email.
  </Card>

  <Card title="Themes" icon="palette" href="/user-guide/design/themes">
    Match your form to your site's look.
  </Card>

  <Card title="Results overview" icon="chart-line" href="/user-guide/results/overview">
    See how many people viewed and submitted.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.