Skip to content
Fomr Logo Fomr Help Center
Join our Slack

How do I add my form to a website?

Grab the embed code from your form’s settings and paste it into your site.

  1. Open your form and go to Configure → Add to website.

  2. Pick how you want it to appear: Standard (inline on the page), Popup (opens in a modal), or Fullscreen.

  3. Copy the generated code and paste it into your website’s HTML where you want the form to show.

The embedded form updates automatically whenever you publish changes—there’s nothing to re-copy. Publish your form first so the embed shows the live version.

Every embed type uses the same small script, https://fomr.io/widget/embed.js. It’s a few KB, loads without slowing your page, and connects your site to the form: it resizes the form to fit, opens popups, and passes along your page’s URL parameters. The form itself loads in an iframe, so its styles and your site’s styles can’t clash. Keep the script in the code you paste.

If respondents leave partway through, their progress is saved for that website. For forms on a custom domain, the generated code uses that domain, for example https://forms.yourbrand.com/s/embed/YOUR_FORM_ID. Popup code adds data-fomr-origin="https://forms.yourbrand.com" to the button instead.

On any embed type, Pro plans can also turn off the “Made with Fomr” branding. See Hide branding.

In Configure, open Add to website, choose Popup, set the position, and copy the code.

Standard

Section titled “Standard”

The standard embed shows your form inline on the page. It’s an iframe plus the embed script:

<iframe
  src="https://fomr.io/s/embed/YOUR_FORM_ID"
  title="Contact form"
  width="100%"
  height="500"
  loading="lazy"
  allow="clipboard-write; fullscreen"
  style="border: 0"
></iframe>
<script async src="https://fomr.io/widget/embed.js"></script>

If you add more than one form to a page, you only need the script once.

Size

Section titled “Size”

Set the width and starting height in the embed settings. The defaults are 100% wide and 500 pixels tall. The height is only used until the form loads: after that, the script resizes the frame to fit the form, including when respondents move between pages or reveal more questions. There’s no inner scrollbar to manage.

Transparent background

Section titled “Transparent background”

Turn on Transparent background to let your site show behind the form. Fomr doesn’t paint the form’s page background, so the form blends into your page, while its own card and fields still keep their theme colors. The option adds ?transparent=1 to the iframe src:

<iframe
  src="https://fomr.io/s/embed/YOUR_FORM_ID?transparent=1"
  title="Contact form"
  width="100%"
  height="500"
  loading="lazy"
  allow="clipboard-write; fullscreen"
  style="border: 0"
></iframe>
<script async src="https://fomr.io/widget/embed.js"></script>
Section titled “Popup”

The popup embed is a button that opens your form in a popup:

<button
  type="button"
  data-fomr-open="YOUR_FORM_ID"
  data-fomr-popup-overlay="true"
  data-fomr-popup-position="center"
>
  Open form
</button>
<script async src="https://fomr.io/widget/embed.js"></script>

Change the button text and style it like any other button on your site. Any element with the same data-fomr-open attribute opens the popup, so you can add several triggers to one page. The popup smoothly grows and shrinks to fit each page of the form, and visitors close it by clicking outside it or pressing Escape, even while they’re typing in the form.

Section titled “Popup options”

If you choose Popup, you can fine-tune how it appears:

  • Position — open it in the center of the page or in the bottom-right corner. This sets data-fomr-popup-position to center or corner.
  • Show popup overlay — dim the page behind the popup so the form stands out. This sets data-fomr-popup-overlay to true or false.
  • Height — Fit the form (the default) resizes the popup to each page of the form. Fixed keeps the popup at the height you choose, between 120 and 2000 pixels, and the form scrolls inside it if it’s taller. This sets data-fomr-popup-height, for example data-fomr-popup-height="480".
Section titled “Open the popup from a link”

Some site builders only let you set a link URL on a button, not custom attributes. In that case:

  1. Add the embed script to your site, for example in the site-wide custom code or header settings:

    <script async src="https://fomr.io/widget/embed.js"></script>

  2. Set the button’s link to #fomr-open=YOUR_FORM_ID.

To change how the popup appears, add the options to the link, for example #fomr-open=YOUR_FORM_ID&popup-overlay=true&popup-position=corner&popup-height=480.

Fullscreen

Section titled “Fullscreen”

The fullscreen embed is a complete HTML page with the form filling the whole browser window. Use it as its own page on your site:

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Contact form</title>
    <script async src="https://fomr.io/widget/embed.js"></script>
  </head>
  <body style="margin: 0">
    <iframe
      src="https://fomr.io/s/embed/YOUR_FORM_ID?embedType=fullscreen"
      title="Contact form"
      width="100%"
      height="100%"
      allow="clipboard-write; fullscreen"
      style="position: fixed; inset: 0; border: 0"
    ></iframe>
  </body>
</html>

Hidden values

Section titled “Hidden values”

To pass hidden values into an embedded form, turn on Hidden values in the embed options and fill them in. Where they go depends on the embed type:

  • Standard and fullscreen — query parameters on the iframe src, for example https://fomr.io/s/embed/YOUR_FORM_ID?utm_source=newsletter&plan=pro.
  • Popup — data-fomr-param-KEY="value" attributes on the button, for example data-fomr-param-utm_source="newsletter".

Your page’s own URL parameters, like UTM tags in the address bar, are passed to the form automatically by the script. If the same key is set in the embed code too, the value in the embed code wins.

Each key must be declared as a hidden value on the form. Other parameters are ignored.

Listen for form events

Section titled “Listen for form events”

The embed script lets your site react to what happens in the form, for example to track conversions in your analytics. The iframe, or the popup’s button, dispatches these events, and they bubble up the page:

EventWhen it firesExtra detail fields
fomr:readyThe form has loaded—
fomr:resizeThe form’s height changesheight
fomr:page-changeThe respondent moves to another pagepageId, pageType
fomr:submitThe respondent submits the form—
fomr:closeThe popup closes—
fomr:redirectThe form redirects after submissionurl

Every event’s detail includes formId, so you can tell forms apart when a page has several:

<script>
  document.addEventListener('fomr:submit', (event) => {
    console.log('Form submitted:', event.detail.formId);
  });
</script>

Redirect after submission

Section titled “Redirect after submission”

If your form redirects after submission, the visitor’s whole page goes to the redirect URL, not just the frame.

Section titled “Paste a share link into other tools”

Your form’s share link, including links on a custom domain, supports oEmbed. Apps and site builders that recognize oEmbed links can turn a pasted share link into an embedded form, with no embed code needed.

Older embed code

Section titled “Older embed code”

Embed code from before this version, a <div data-fomr-id="..."> with a script, is deprecated but keeps working: the script turns it into the same iframe embed. To switch, copy the new code from Configure → Add to website and replace the old snippet. You can also remove any embed.css stylesheet link, which is no longer needed.

Want the form on its own branded address instead? Set up a custom domain.

Your next form could be the best-looking thing on your site.

Free forever. Unlimited responses. No signup to start.

Start building — free
4.9