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_URLplaceholder 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 fallbackiframeembed method. -
The
<iframe>will not load if it is within600pxor75vhof 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 the600pxor75vhrule 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.