How to Embed Forms in AMP pages and Why it’s Important
The official AMP Project page announced earlier this month that it successfully launched support for forms created in the Accelerated Mobile Pages (AMP) HTML. The forms that you can create vary between interactive polls, e-mail caps (capture) form to even the more intricate forms like selecting colours on an online marketing product webpage.
AMP or Accelerated Mobile Page is a joint venture between Google and Twitter that aims to create fast and responsive mobile pages. What it is is essentially a stripped down HTML. It’s designed to load super fast so naturally it’s lightweight and is made by design to do so with accuracy while using the least resources (see “Bandwidth) possible. The best part about AMP, however, is that it’s open source so internet bigwigs such as Apple and Facebook are working on integrating AMP with their in-house applications.
The most convenient example for this is Facebook’s Instant Article. When people browse through their Facebook accounts using their mobile devices, you might find articles with a special lightning shaped icon that looks like this:
Posts like that were created with Facebook’s Instant Article Resource and they are optimized to run on mobile devices. Yup, that’s what AMP basically is. It creates a “light” version of a page which allows the content to load faster while using the least amount of resources possible. AMP is already freely available to everyone and chances are, you’ve seen one or two AMP-enabled content today. Is AMP seriously that widespread now? Well, while writing this article, I came upon one of Facebook’s instant articles.
Moving forward, AMP now comes with forms and that’s a really good thing for development in mobile browsing. The AMP form extension tool is a much needed improvement because it supports both XHR form submissions as well as regular navigation. This means that the overall user-experience of filling up forms is vastly improved.
Let’s talk about some of the benefits in more detail, namely:
Having the ability to change the page when the form is “submitted” using the “on” feature. Another nifty thing about the “on” feature is that it can be utilized to modify or change the page based on whether the form was submitted and filled up successfully or with errors.
Using text that can be modified with templated response rendering, fields can now be annotated upon the submission of the form. This feature can be used to give live, contextual feedback on what field the user made an error on and how they can fix that.
Another great feature is having the ability to create and style fields created upon validation by relying on CSS pseudo-classes which is another way of providing contextual feedback in real time based on the validity of the user’s input.
The AMP Project has stated that these features, as they are initially available, can and will be expanded upon in terms of functionality and these changes will be based on user and creator feedback. The AMP Project is also seeking more ways to support validation and conditional behavior support.
What’s surprising is that The AMP Project was started barely a year ago. They have continued to make breakthroughs and changes based on user-experience which is great. Initially restricted to publishers, AMP is now a viable solution for all sorts of website owners.
So how can we start creating our own AMP pages? It’s simply, really.
How to let Google know that there is an AMP page available:
Place this tag to the non-AMP page <link rel=”amphtml” href=”$AMP-PAGE_URL”> tag below the <head>.
And place this tag to the AMP page <link rel=”canonical” href=”$WEB-PAGE_URL”> Note: If you only have an AMP Page, you must still add a canonical link to itself. Example, <link rel=”canonical” href=”$AMP-PAGE_URL”>.
It’s that easy!
Unsurprisingly, AMP capable pages are now being indexed in Google Search results. What this means is that AMP capable pages are now accessible to everyone now more than ever which means that website owners can now have more exposure for their AMP content which is great for rankings and of course, user experience.
AMP is still a fairly young endeavor and I look forward to watching it grow especially now that it has moved one step forward to the future. What are your thoughts on AMP? Has it made your user-experience even better? Is it easier on you as a website owner? Let’s discuss your thoughts in the comments below.