How do I embed my form with AMP?

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.

All Solutions

Products

Solutions

All Solutions

Integrations

Resources

Need Help?

Embedding

Embedding your form

Gotchas