Once your form is ready to embed and you have your AMP page setup you can follow the following steps to embed your form. Currently, AMPs requirements to use a custom 'amp-iframe' element mean it only works with the fallback iframe embed method.

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 url. You can find this in the Editor under the Share → Social & URL menu.
<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>
  • There are a few requirements from AMP that you need to consider when embedding your form:
  1. The iframe will not load if it is within 600px or 75vh of the top of the window when the page is loaded. You need to position the iframe at least that far down.
  2. If the page is refreshed while the iframe is within 600px or 75vh 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 AMP's iframes.
  3. PayPal is not currently supported in AMP pages so forms with Paypal connected cannot be embedded successfully in AMP pages.