Update 5/15/2017: Refer to my new post about how to implement forms in AMP.
I’ve been working a lot with Google’s Accelerated Mobile Pages (AMP) Project as of late. The platform has a lot of restriction and doesn’t permit things such as third-party JavaScript and html form tags (so, lead-capture forms aren’t supposed to be possible within the AMP framework), but there is a weird workaround…
iframes ARE supported within amp-html, and they can include third party JavaScripts, form tags (useful for lead capture or a comment system like Disqus), and even produce pop-ups.
To do this, you need to add the amp-iframe extended component to your <head>:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
And then add an amp-iframe tag in your body. It must be at least 600px or 75% of the first viewport away from the top. The URL in the iframe has to be an https url and must not be on the same domain (or at least subdomain).
In order to add some magic and enable things such as pop-up functionality, you will have to add some values to the sandbox attribute of amp-iframe.
For example:
You may want to add sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms".
This would allow you to include lead capture forms and pop-ups to your amp-html page.
Available values for the sandbox attribute (within HTML5):
| Value | Description |
|---|---|
| allow-forms | Re-enables form submission |
| allow-pointer-lock | Re-enables APIs |
| allow-popups | Re-enables popups |
| allow-same-origin | Allows the iframe content to be treated as being from the same origin |
| allow-scripts | Re-enables scripts |
| allow-top-navigation | Allows the iframe content to navigate its top-level browsing context |
Table Source: W3Schools
That’s it. The iframe is loaded asynchronously, but it should work as long as the project permits it.
Thanks to Conrad O’Connell for helping me prove this would actually work.
Update: It’s Google approved!
Right from Google's mouth regarding uses for amp-iframe in accelerate mobile pages… pic.twitter.com/JeDC7qfpEh
— Paul Shapiro (@fighto) February 26, 2016
Source:
Coming Soon…
@fighto that's true. We also have a sample here: https://t.co/oejk0XZmEt that shows what's possible with this feature.
— Adewale Oshineye (@ade_oshineye) August 4, 2016
Update 10/31/2016
Forms are now supported using the amp-form extension. Like other AMP extensions, you will need to include another JavaScript file in the head of your AMP page: <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>. For more information, reference the documentation
@fighto while this was never really a hack and totally working as intended, would you mind updating the post?https://t.co/gt8BCDNwvi
— AMP Project (@AMPhtml) October 31, 2016
Update 5/15/2017
Refer to my new post about how to implement forms in AMP.