The Accelerated Mobile Pages project announced this week it has launched support for forms in AMP HTML. Types of forms can range anywhere from a simple e-mail capture form, to interactive polls, to more complex forms such as selecting colors on an e-commerce product page.
”With the “amp-form” extension, the <form> element and its related elements like <input> can be used to build forms within AMP documents.”
The amp-form extension supports both regular navigation and XHR form submissions, and is said to be an improvement on the overall experience of filling in forms.
The benefits of forms on AMP pages versus forms on regular pages include:
- Change the page when the form is submitted using the “on” attribute. The “on” attribute can also be used to change the page depending on whether the form was submitted successfully or with errors.
- Annotate fields upon submission by using templated response rendering. Use this feature to give contextual feedback on what’s wrong with field input.
- Style fields based on validation status using CSS pseudo-classes to provide users with real-time feedback on whether their input is valid.
For more details on how to implement forms on AMP pages, it’s all laid out in the official documentation. Some live examples of AMP pages with forms are available at AMP by Example.
The AMP project says it will continue to expand the functionality of forms soon, based on user feedback. In addition, the team is looking into adding further validation support and conditional behaviors.
”With this initial set of form support, we’re looking forward to seeing all of the great form-enabled experiences that developers build.”
It has only been a little over one year since the AMP project was first introduced. At the time, its functionality was limited to provided to provided stripped-down versions of news articles that loaded instantly on mobile devices.
It wasn’t until 4 months after launch, in February 2016 that AMP pages were even surfaced in search results. When they were, it was in the form of a dedicated AMP carousel which typically only displayed news stories from top publishers.
Fast forward to today and several major milestones have been reached. With the added functionality introduced by the AMP project throughout the year, the technology isn’t just for news publishers anymore. AMP is now a more versatile solution for many types of site owners.
Perhaps the greatest milestone reached is the indexing of AMP pages in Google search results. It didn’t take long before the AMP carousel was removed, and accelerated mobile pages started appearing in the regular set of organic search results. This gives searchers more access to AMP content, site owners more exposure for their AMP pages.
At only one year old, AMP is still in its infancy. It will be interesting to see how it continues to grow and evolve in 2017.
