We’ve just launched support for forms in AMP HTML. With the “amp-form” extension, the <form> element and its related elements like <input> can be used to build forms within AMP documents. This enables building experiences ranging from a product color picker on an e-commerce detail page to an email field to capture newsletter signups to an interactive poll to engage readers within an article.
Regular navigation and XHR (XMLHttpRequest, aka Ajax) form submissions are both supported, but consult the documentation for more details on implementation requirements. In addition, amp-form exposes several features to improve the experience of filling in forms:
- Use the “on” attribute to change the page when the form is submitted, or 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.
To get started, check out the documentation and examples at AMP By Example.
We want to hear from you about additional features that would be useful, as we are planning to expand functionality of forms soon. For example, custom validation is now available as an experimental feature (“amp-form-custom-validations”). Further validation support and conditional behaviors are just two examples of enhancements that we are tracking on the AMP Roadmap.
With this initial set of form support, we’re looking forward to seeing all of the great form-enabled experiences that developers build.
Posted by Rudy Galfi, Product Manager, AMP Project