How to embed your form

  1. In the form editor go to Share -> Embed.
  1. 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.
  2. Copy the script you have chosen.
  3. Go to the editor or HTML source of where you would like the form to appear and paste the script.
  4. Save and refresh the page to see your embedded form!

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

In some services, you’re not allowed to include JavaScript, so the standard embed code from above won’t be possible. The good news is you can still embed your form in an iFrame. All you need for this is the URL of the live form.

Here’s a code example of how to embed a form in an iframe.

<iframe frameborder="0" width="100%" src="FORM_URL?embed=1&inline=1" height="HEIGHT"></iframe>

Just replace FORM_URL with the full URL to the form (don’t forget the “https://” part!).

You’ll also need to set the height of the iframe by replacing HEIGHT with the height the form needs to display in pixels. If the form is taller than the height you specify the form will scroll inside of the iframe, otherwise it will sit neatly on the page. If you’re unsure what to put as the height, try “400” to get started, you can always change it later.

Note that there are a few downsides to using an iFrame directly;

  1. The form cannot be dynamically resized to take up the space needed by the form.
  2. PayPal payments are not supported.
  3. The form cannot control the scroll position of the page, which means if the form changes height drastically, like on changing pages, or on submission, the user may not be scrolled to the right place on the page.

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.

1. Take your standard embed code:

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

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

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

data-prefill="KEY=value&KEY2=value"
The data pre-fill attribute is used to pass hardcoded pre-fill values through to the form.

data-prefill-inherit="1"
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.

data-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.

data-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.

Did this answer your question?