How to create google amp for dynamic web pages?

Question

Is there a way to create google amp for dynamic web pages? My website contains form elements like lead forms, on-page comments etc. I am impressed by AMP and would like to implement it through out my website.

Answer 1

It depends on how "dynamic". AMP can be considered a stripped down version of HTML. You aren't allowed include arbitrary scripts, but Google maintains a set of approved AMP extensions that can let you do things like add accordions, lightboxes, ad units, etc. You also cannot include form tags or any of the HTML form elements (input, select, textarea, etc.). However, you can use amp-iframe to embed another webpage within your AMP page. This other webpages doesn't have to conform to the AMP specifications, so you're free to add a form in that way. Just remember that the standard iframe rules apply: you have to have a fixed height for the frame (which can be problematic for multiple step forms where the amount of fields change page to page) and your success response will be confined to the iframe (meaning you can't redirect the entire page somewhere else). Still, it may be a workable solution for you.

In general, AMP pages are supposed to be simple. That's kind of the idea. Google's restrictions are there to force you to keep things simple. The best use of AMP remains pure content pages such as blog posts, news, and other article-type things. You can push it farther, but the restrictions start to become a little more irritating the farther you try to push. There's a fair bit of trial and error, in my experience, trying to obtain a close approximation to what you would ideally like to have.

The good thing about AMP is its totally opt-in and and piecemeal. You don't have to convert your whole site. You can just do a single page, if you want. This lets you get your feet wet, provide a little extra juice to your site, and if you can't do what you want with AMP, you can just use a standard web page, without penalty.

Answer 2

I just finished creating an AMP engine for all 8 of our ABC news sites. The biggest issue i ran into is having to server everything up via HTTPS for AMP tags. Our video player needs extensive external JS to support for it's playing with preroll and ads. We also do a lot of advertising with multiple vendors on the pages. You'll definitely want to read up on AMP as much as possible before diving in.

It was stated above by @chris_pratt that forms tags and elements are not allowed in AMP pages. Support has been added for embedding forms in AMP pages.

The biggest things to be aware of with AMP:

1. No external JS (if needed it has to be pulled in via the amp-iframe)
2. Calls made from AMP specific tags need to be made via HTTPS
3. No inline CSS and no external style sheets can be used. Custom CSS is added using the tag (50k max)
4. In my case i had mixed content warnings (that will prevent an AMP page from being valid) trying to pull JS files into an AMP-IFRAME.
5. There are a lot of restrictions in AMP pages that need to be addressed before implementing AMP into your project. Style wise you'll notice that certain CSS is not allowed, one being "!important" and "*". This is just a few so read the rest.
6. There are layout rules as well which you'll need to read up on before starting.

Bottom line is AMP is very fast for loading pages but their are a lot of restrictions and requirements that must be met in order to actually display AMP versions. Once you understand the limitations you should be able to plan your attack accordingly.

Hope this helps.