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.
Thanks for the post!
Any WordPress Plugin For Convert Wp to AMP Ready?
Thanks
Yeah, There is an official WordPress plugin available. Check out my “more general” post about AMP on Search Engine Land:
http://searchengineland.com/get-started-accelerated-mobile-pages-amp-240688
There’s a whole walk through about how to get going in WordPress. I didn’t cover it in the post, but I also recommend the PageFrog plugin to run on-top of the official WordPress AMP plugin.
Hey Paul,
It’s a really useful tip! I think as a non-tech guy I started to understand the technical side of AMP. I did research on this topic and put together a detailed guide on Google AMP. I also used this article as a resource (check it out here: http://blog.momentum.ai/google-accelerated-mobile-pages)
Honestly, I didn’t fall in love with AMP, because I don’t want to say goodbye to my tracking tools. Even it’s the price of speed.
this is great, thx!
What if AMP is being used for a website that takes in sensitive information over forms? Say the Banking/Finance/Medical businesses?
Will this information go to Google servers before it goes to the company, since AMP will be cached?
Na, it would go to your form endpoint.
Hey Paul,
How can I track AMP form submissions without thankyou page? For example, for Contact Form 7.
Hey Enrique,
Check out this presentation I gave for SMX Advanced. Slides 40-46 should be able to help you out with tracking:
Basically, I recommend using CSS-selectors for tracking. I also recommend checking out my updated post about working with forms in AMP. A lot has changed.
Thank you, Paul.
Yes, tracking the click on the submit button is what I did for the moment, but it is not the same a click on the button as a submit. For example, if the user clicks twice and the form is not validated and really it is not sent…
I suppose there is no a better solution.