{"id":111457,"date":"2016-11-10T17:17:48","date_gmt":"2016-11-10T09:17:48","guid":{"rendered":"https:\/\/seo-hacker.com\/?p=11457"},"modified":"2023-08-16T09:02:33","modified_gmt":"2023-08-16T01:02:33","slug":"embed-forms-amp-pages","status":"publish","type":"post","link":"https:\/\/seo-hacker.com\/embed-forms-amp-pages\/","title":{"rendered":"How to Embed Forms in AMP pages and Why it’s Important"},"content":{"rendered":"

\"How<\/a><\/p>\n

The official AMP Project page announced earlier this month that it successfully launched support for forms created in the Accelerated Mobile Pages (AMP) HTML<\/a>. The forms that you can create vary between interactive polls, e-mail\u00a0caps (capture) form to even the more intricate forms like selecting colours on an online marketing product webpage.<\/p>\n

<\/p>\n

AMP or Accelerated Mobile Page <\/a>is a joint venture between Google and Twitter \u00a0that 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.<\/p>\n

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:<\/p>\n

\"(amphtml.com)\"<\/a>

(amphtml.com)<\/p><\/div>\n

Posts like that were created with Facebook’s Instant Article Resource<\/a>\u00a0and 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.<\/p>\n

\"amp_02\"<\/a><\/p>\n

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.<\/p>\n

Let’s talk about some of the benefits in more detail, namely:<\/p>\n

    \n
  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.<\/li>\n
  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.<\/li>\n
  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.<\/li>\n<\/ol>\n

    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.<\/p>\n

    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.<\/p>\n

    So how can we start creating our own AMP pages? It’s simply, really.<\/strong><\/p>\n

    Write or save this markup as an HTML(.html) file:<\/b><\/p>\n

    [bq2]<\/p>\n