Here's the easiest way to embed your form.

  1. In the form editor go to Share → Embed.

  2. Follow the instructions on the page to choose the kind of embed you would like. There are three kinds of embedding, inline, full screen, and popup button.

  3. Copy the script you have chosen.

  4. Go to the editor or HTML source of where you would like the form to appear and paste the script.

  5. Save and refresh the page to see your embedded form!

Can’t use JavaScript? Use the iFrame fallback method.

Special Attributes

There are a few special HTML attributes that can be added to an embedded form that can be quite useful. Here's how to use them.

Take your standard embed code, which will look something like this:

<div data-paperform-id="newsletter"></div>
<script>(function() {var script = document.createElement('script'); script.src = "https://paperform.co/__embed.min.js"; document.body.appendChild(script); })()</script>

Add the attributes after the "<div " and before the "data-paperform-id". For example, if I were to add the attribute prefill-inherit then the first part of the embed code looks like this:

<div prefill-inherit data-paperform-id="newsletter"></div>

Here's a list of attributes, and how to use them.

prefill="KEY=value&KEY2=value"

The data pre-fill attribute is used to pass hardcoded pre-fill values through to the form. This also allows UTM parameters to be passthrough.

prefill-inherit

Passes through the URL Parameters of the page the form is embedded on to the form, so you can dynamically pre-fill the embedded form through the URL of the page.

scroll-offset="NUMBER"

By default 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, the form can be behind the heading, hiding the top of the form. Set the data-scroll-offset attribute to the height of the fixed header in pixels to offset the automatic scrolling.

no-scroll="1"

By default when changing pages on an inline embedded form, the page is automatically scrolled to the top of the form. Setting this attribute turns off this automatic scrolling.

spinner

Includes a spinner while the form is loading.

lazy

Delays loading inline embeds until the form has scrolled onto the screen.

height="600px"

For guided mode forms, the height of the embed can be restricted to a desired height. The value can be any valid CSS unit (px, %, em, rem, vw, vh...). The height can never be larger than the viewport.

border

Shows a border around inline embedded forms.

border-color="black"

Changes the color of the border around the embedded form. The color value can be any valid CSS color.

onsubmit="functionName" (draft API)

Will call functionName with the submission data on submission. functionName must be defined on the window to be called.

onpagechange="functionName" (draft API)

Will call functionName with the submission data when the page is changed inside of the form functionName must be defined on the window to be called.

title="This is a title"

Sets the title attribute of the embedded form's iFrame, which can be useful for accessibility purposes.

Upgrading your embed code to Paperform V3 Embeds

In Paperform V3, we released an updated version of the embed code to support features like 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.