How to Embed Forms in AMP pages and Why it’s Important

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:

(amphtml.com)

(amphtml.com)

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.

amp_02

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:

  1. 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.
  2. 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.
  3. 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.

Write or save this markup as an HTML(.html) file:

[bq2]
    • <!doctype html>
    • <html amp lang=”en”>
    • <head>
    • <meta charset=”utf-8″>
    • <script async src=”https://cdn.ampproject.org/v0.js”></script>
    • <title>Hello, AMPs</title>
    • <link rel=”canonical” href=”$SOME_URL” />
    • <meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>
    • <style amp-custom>
    • /* any custom style goes here */
    • body {
    • background-color: white;
    • }
    • amp-img {
    • background-color: gray;
    • border: 1px solid black;
    • }
    • </style>
    • <script type=”application/ld+json”>
    • {
    • “@context”: “http://schema.org”,
    • “@type”: “NewsArticle”,
    • “headline”: “First AMP Project”,
    • “datePublished”: “2016-11-11”,
    • “image”: [
    • “logo.jpg”
    • ]
    • }
    • </script>
    • <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    • </head>
    • <body>
    • <h1>Welcome to the mobile web</h1>
    • </body>
    </html>

[bqc]

AMP HTML must consist of the following:

  • <!DOCTYPE html> declaration defines this document to be HTML5
  • <html amp> element is the root element of an HTML page
  • <head> element contains meta information about the document
  • <meta charset=”utf-8″> tag as the first child of their <head> tag.
  • <script async src=”https://cdn.ampproject.org/v0.js”></script> tag as the second  child of their <head> tag (this includes and loads the AMP JS library).
  • <link rel=”canonical” href=”$SOME_URL” /> tag inside their <head> tag that points to the regular HTML version of the AMP HTML document or to itself.
  • <meta name=”viewport” content=”width=device-width,minimum-scale=1″> tag inside their <head> tag. It’s also recommended to include initial-scale=1.
  • <style amp-custom></style> inline stylesheet (note: every AMP page can only have a single embedded stylesheet(amp.css), and there are certain selectors you’re not allowed to use.)

How to include images on your AMP HTML:

  1. Instead of the usual <img /> tag replace it with <amp-img></amp-img>. Example, <amp-img src=sample.jpg alt=”sample.jpg”></amp-img>.

How to Preview and Validate your AMP Page:

You can preview your AMP page just like how you view any other static HTML site.

The next step is to validate the AMP.

  1. Open your favorite internet browser.
  2. Add “#development=1” to the URL, for example,
    http://localhost:8000/index.html#development=1
  3. Open Chrome DevTools console and check for validation errors.

How to let Google know that there is an AMP page available:

  1. Place this tag to the non-AMP page <link rel=”amphtml” href=”$AMP-PAGE_URL”>  tag below the <head>.
  2. 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.

Share on:
Sean Si

About Sean

is a Filipino motivational speaker and a Leadership Speaker in the Philippines. He is the head honcho and editor-in-chief of SEO Hacker. He does SEO Services for companies in the Philippines and Abroad. Connect with him at Facebook, LinkedIn or Twitter. Check out his new project, Aquascape Philippines.