Once your form is ready to embed and you have your AMP page setup, you can follow the following steps to embed your form.
Note: Currently, AMP requires you to use a custom
amp-iframe
element. This means that you may only embed a form using the fallbackiframe
embed method.
Embedding your form
<script
async
custom-element="amp-iframe"
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"
>
</script>
FORM_URL
placeholder with your actual form's 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 must be considered:
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.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 an AMP iframe
.