Paperform logo
ProductTemplatesPricingResources
ProductTemplatesPricingResources
Sign inTry Free

How do I embed my form with AMP?

Help Results & Sharing Embedding

Embedding

Can I add a form as a popup on my site?Can I change my form's width when embedding it as a popup?Can I embed a form without the background?Can I embed a payment form in a non-SSL page?Can I embed my form in an email?Can I speed up my embedded form's load time?What is oEmbed and how can I use it with Paperform?Embedded form JS API (draft)How can I embed my form in a React app?How do I embed a Paperform form in Webflow?How do I embed my form with AMP?How do I use the iFrame fallback method for embedding?How do I embed a Paperform form to Squarespace?Is the form mobile-friendly when it is embedded?My dropdown question is cut off when embedded. How can I fix it?Why doesn't my embedded form work?Embedding Guide

Once you have your AMP page set-up, you can follow the steps below to embed your form.

Embedding your form

  • Paste the code snippet below into your AMP page just before the end of the <body>. This script is required by AMP to make the <amp-iframe> component work.
<script  
  async  
  custom-element="amp-iframe"  
  src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
>
</script>
  • Paste the code snippet below into your AMP page where you would like your form to be embedded. You need to update the FORM_URL placeholder with your actual form's URL. You can find this in the form editor within Share → Social & URL.
<amp-iframe  
  width="1000"  
  height="1000"  
  sandbox="allow-scripts allow-same-origin"  
  layout="responsive"  
  frameborder="0"  
  src="FORM_URL/?embed=1&inline=1"  
>  
</amp-iframe>

Gotchas

There are a few requirements from AMP that must be considered:

  • You may only use a custom <amp-iframe> element on your website. This means that, for the purposes of embedding a form, you may only do so using the fallback iframe embed method.

  • The <iframe> will not load if it is within 600px or 75vh of the top of the window when the page is loaded, whichever is smallest. You need to position the <iframe> at least that far down.

  • If your <amp-iframe> element contains a placeholder, it is not subject to the 600px or 75vh rule explained above. For further details on adding placeholders to your site, pleade refer to AMP's documentation.

  • If the page is refreshed while the <iframe> is within 600px or 75vh (whichever is smallest) of the top of the window then the <iframe> will fail to load. There is nothing you can do to avoid this, it is a limitation of an AMP <iframe>.

  • PayPal is not currently supported in AMP pages, so forms with PayPal connected cannot be embedded successfully in AMP pages.