Forms now supported in AMP

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.
form-error
An example of templated response rendering. Once the form is submitted (in this case, with an error) you can return a response with a helpful message.

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

Forms now supported in AMP

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s