---
title: Embedding Guide | Paperform Help Center | Paperform
description: To insert a form into another page or service, you'll want to embed it. We'll cover the various methods, attributes, and considerations for embedded forms.
url: "https://paperform.co/help/articles/embedding-guide"
type: static
generatedAt: "2026-04-04T00:42:03.175Z"
---

Embedding Guide
## Introduction

When you use a Paperform form's direct link, such as **example.paperform.co**, the entire page is the form and only the form.

However, there are times when you might want the form to appear somewhere else, such as on your own website as a standalone page, inline with other content, or as a popup within the same page. In these cases, you may *embed* your form.

We'll cover the various methods, attributes, and things to note for embedded forms.

## How It Works

 1. From the form editor, go to Share → Embed.

![Screenshot of the Embed option from the Share drop-down menu](https://img.paperform.co/fetch/f_auto,w_1400/https://d3gw2uv1ch7vdq.cloudfront.net/img/select-share-%E2%86%92-embed-higher-res.png)
 1. Choose from the available methods:

 - Inline
 - Full screen
 - Popup
 1. Copy the provided code (HTML, JavaScript) for the option you want to use.
 1. Go to the editor or HTML source where you want the form to appear and paste the code.
 1. Save and refresh the page to see your embedded form.

Typically, places where you want to include the embed code on other services are called code blocks or similar. You'll want to avoid putting any non-script elements in a header or footer as these places won't display things like `div`, `a`, or `button` on your page correctly.

> Can’t use JavaScript? Use the [iFrame fallback method](https://paperform.co/help/articles/how-do-i-use-the-iframe-fallback-method-for-embedding/).

## Embedding methods

### Inline

A form embedded inline can be used within an existing page on your website, resting above, below, or between other content. This method lets you insert a form on your page as if you were inserting another paragraph and is the most common option.

### Full screen

If you want your form to look like it does on Paperform where it takes up the entire screen but want to display it on your own website instead of directing respondents to a Paperform URL, the full screen method is perfect.

### Popup

A form doesn't always have to be visible on a page such as with the inline or full screen methods. A common approach is to have a form "pop up" on the page when an element, such as a button, is clicked.

You can use any element to respond to the popup so long as you include `data-paperform-id="form-id"` and `data-popup-button="1"` in the element's attributes.

### Programmatic popup

To have greater control over how and when the popup form appears, you can programmatically call the form by

 - including the script: `<script src="https://paperform.co/__embed.min.js"></script>`
 - calling the popup function: `Paperform.popup('form-id')`

For example, this could let you only have the form pop up under a combination of factors, after a certain delay, or something else.

A working example of this in action looks something like

```html
<script>
  document.querySelector('#element-id').addEventListener('click', function() {
    Paperform.popup('my-form-name');
  });
</script>
```

where `#element-id` is the ID of the target element.

### Programmatic Embed Special Attributes

When using our programmatic embedding method, you can use the special attributes listed below via a second argument in your function.

For example:

```html
<script>
  document.querySelector('#element-id').addEventListener('click', function() {
    Paperform.popup('my-form-name', {
        prefillInherit: "1", // See reference for `prefill-inherit`
        prefill: "key=value"
    });
  });
</script>
```

## Special Attributes

### Attribute reference

 - `prefill="key=value&key2=value"`

To use pre-filling directly through the element, you may pass hardcode values. For example, you might pre-fill UTM parameters here instead of placing them in the URL's query string.
 - `prefill-inherit`

To pre-fill a form by using the query string of the page it's embedded on, you may pre-fill by inheritance, setting this attribute on the element you're using to embed the form. This lets you dynamically pre-fill the form based on the current query string.
 - `scroll-offset="number"`

When changing pages on an inline, embedded form, the page is automatically scrolled to the top of the form.

However, if the page the form is embedded on has a fixed header or the form consistently sits lower on the page than the top, page changes may cause the scroll position to be lower than expected and may cause confusion for respondents as to where the form went.

Setting the **scroll-offset** to a number of pixels offsets what is considered the "top" and enables page changes to more reliably alter the scroll position to where it needs to be.

For example, if there is a fixed header of 100px, you would want to use embed code that looks like

```html
<div scroll-offset="100" data-paperform-id="form-id"><div>
```
 - `no-scroll="1"`

When changing pages on an inline, embedded form, the page is automatically scrolled to the top of the form.

If you want to disable this behavior entirely, you can set `no-scroll` equal to `"1"`.
 - `spinner`

Use this to include a spinner (loading indicator) while the form is loading.
 - `lazy`

Delay loading an inline, embedded form until the form has scrolled into view on the screen.
 - `height="600px"`

*This attribute applies to guided mode only.*

The height of the embedded form may be restricted to a specific height. The value can be any valid CSS unit (px, %, em, rem, vw, vh, ...).

This is commonly used to reduce the amount of space a guided mode form takes, including the spacing between the centered form content and any buttons.

**The height may never be larger than the viewport.**
 - `border`

Show a border around an inline, embedded form.
 - `border-color="black"`

Change the color of the border around an inline, embedded form. The color value can be any valid CSS color. If the `border` attribute is not present, this attribute will not do anything.
 - `onsubmit="functionName"`

Call `functionName` with the submission data on submission. The function must be defined on the `window` to be called.

Review the [draft API documentation](https://paperform.co/help/articles/embedded-form-submission-handling-draft/) for more information.
 - `onpagechange="functionName"`

Call `functionName` when the page changes in a form, including the `currentPage` and `totalPages` in each response.

Review the [draft API documentation](https://paperform.co/help/articles/embedded-form-submission-handling-draft/) for more information.
 - `title="This is a title"`

Set the title of the embedded form's `iframe`.

*This can be useful for accessibility purposes.*

## Using the right embed code version

### Updating your embed code

In Paperform V3, we released an updated version of the embed code to support features like [Guided Mode](https://paperform.co/help/articles/how-do-i-configure-guided-mode/), spinners, and lazy loading.

To update your embeds, you can just replace the URL of the script from `https://paperform.co/__embed` to `https://paperform.co/__embed.min.js`.

### Example of *all* attributes being utilized

```html
<div
  prefill="name=Danny"
  prefill-inherit
  scroll-offset="100"
  no-scroll="1"
  spinner
  lazy
  height="600px"
  border
  border-color="black"
  onsubmit="submissionHandler"
  onpagechange="pageChangeHandler"
  title="My form's title"
  data-paperform-id="form-id"
></div>
```

> **Note: The above HTML may not work as is.**
>
> Not all attributes are compatible with each other (e.g. `scroll-offset` and `no-scroll`) or they may require specific configuration (e.g. `height` requires guided mode).
>
> The formatting of one attribute per line is for readability; you are not required to format your HTML exactly like this.

## Gotchas

### Using `scroll-offset` when necessary

Recall from the above attribute reference that inline, embedded forms that are positioned lower than the top of the page — which is usually the case — may not scroll as expected on page changes. Using `scroll-offset` alleviates this issue when set correctly.

### Refreshing the page or viewing your live site

Some website builders won't display the form in the editor or preview views of the platform. You may need to either refresh the page or possibly view the live version of your page in order to see the form displayed.

### Changing the size of your form

**Inline**
 By targeting the `div width` and `div height` within the page your inline form appears on, you can change the size of the form with [Custom CSS](https://paperform.co/help/articles/what-is-html-and-css/). If using the [iFrame fallback method](https://paperform.co/help/articles/iframe-embeds/), you can change the size within the HTML snippet.

**P op-up**
 You can change the size within the page your form pop-up appears on. We have a [snippet of example CSS](https://paperform.co/help/articles/can-i-change-my-forms-width-when-embedding-it-as-a-pop-up/) to get you started.

### iFrames

 - Some website builders don't play nice with an `iframe` and may cause unexpected issues.
 - Certain configurations (e.g. security policies, parental controls) can block an `iframe.`
 - You can't modify the content in an `iframe` from the page you're embedding it within.
 - If a website builder wraps our `iframe` in their own `iframe`, you'll be unable to use `prefill-inherit` successfully since you'd be inheriting from their `iframe` instead of the page you mean to embed on.

### If using the fallback method, a few additional points apply:

 - Cannot be dynamically resized as the form length changes.
 - Cannot control the scroll position of the page it's embedded on.
 - Do not support PayPal payments.

### Enterprise Region Embedding

When embedding forms hosted from an Enterprise region, ensure the `data-url` attribute is set with the complete URL of your form. The correct code is available from the form editor under the *Share → Embed* menu when using an Enterprise plan.

This attribute is only required for **Enterprise** region embeds, and shouldn't be set for standard Paperform plan embeds.

### Related Articles
  [How can I embed my form in a React app?  Embedding your form within your React app is slightly more complicated than simply copying and pasting some embed, but only slightly. This article provides guidance on how to embed Paperform in your React app.](/help/articles/how-can-i-embed-my-form-in-a-react-app/)
[How do I embed a Paperform form in Webflow?  Embedding your Paperform form in a Webflow site is quick and easy. We'll show you how to get it done fast.](/help/articles/embed-paperform-forms-in-webflow/)