Intent to Implement: AMP Forms Support

[mkhatib]

AMP will allow the usage of HTML5 <form> and <input>s. Publishers and Developers wanting to use Forms in their AMP Docs would be required to include the amp-form extension. There would be no amp-form element provided initially though it might be introduced in the future if we see need to it.

For now the AMP Form extension will polyfill support for validation where missing and allow forms to be submitted in an XHR-request.

While in experiments we'll start adding these features:

• Allow basic usage of forms and inputs
• Submit via xhr, _top or _blank.
• Validate and stop submission on Safari and other browsers that doesn't have validations-complete story
• Allow rendering success and error states with data returned from the response
• Build a tooltip component to be used when the builtin report UI is not available
• Report Validation Errors on Webkit-based browsers that don't have builtin UI for error reporting.
• Provide classes/attributes hooks to style different state of the form
• Provide classes to style different states per input as the user jump between inputs
• Allow users to always use custom validation messages instead of browser-provided UX
• Expose submit event to allow on=submit:lightbox.close syntax.

Other issues to track:

• Prevent double-submissions while the request is still being processed
• Respect novalidate even on non-supported browsers Forms should respect the novalidate attribute #3469
• Cleanup rendered submissions templates during submit Cleanup rendered templates during submissions in forms #3587
• Add Styles to display error/success containers to amp-form.css
• Form submission fail when using GET and native Fetch API Form submission fail when using GET and native Fetch API #3736
• Fieldsets marked valid when having invalid inputs on non-blink browsers fieldset.checkValidity always returns true #3898
• Make custom validation and polyfills accessible - [Accessibility issue] Click on subscribe button with empty Name and email does not read out as value missing from both text boxes #3880 Bubbles appear after the form for screenreader users #3872 XHR demo success text not announced by screen reader #3873

This will probably go out of experiment as soon as the list above with the required validations are deployed.

Next we'll explore field-dependencies, data-loading and other features.

[Herb0t]

Is there a timeline on when AMP Forms Support will be added?

[dandv]

@herbertl: experimental forms support has been available since June, and we have an ampbyexample sample.

[apch54]

is there a mean working on a non htpps server ?
thanks in advance for all answer.

[mkhatib]

@apch54 no not currently. I am not even sure if non-secure endpoints would be allowed in the future.

cc/ @dvoytenko @cramforce for more details.

[dvoytenko]

All AMP protocols are allowed to be tested on http://localhost in dev modes. But not on any non-localhost http server.

[BijuzGit]

Team:
I have an Form that captures information like username, email ID and mobile number in TEXT area and gives the option of dropdown box to select Location. This information is then sent to my server when the user taps the SUBMIT button. Can you'll guide me how i can incorporate the same using AMP.
( I am new to AMP)

[rudygalfi]

The ability to support this is being developed under this issue. Much of the functionality is built, but is only available experimentally pending the entire feature being ready to launch. If you want to try it out, you can use pages like https://ampbyexample.com/components/amp-form/ to get started.

[BijuzGit]

Thanks Rudy for the prompt reply.. surely i will be trying out and sharing
my experience

On Thu, Sep 8, 2016 at 10:28 PM, Rudy Galfi notifications@github.com
wrote:

The ability to support this is being developed under this issue. Much of
the functionality is built, but is only available experimentally pending
the entire feature being ready to launch. If you want to try it out, you
can use pages like https://ampbyexample.com/components/amp-form/ to get
started.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#3343 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AVDPqn8AzH8Pa3mR7Slqty4miaP-VbLxks5qoD6fgaJpZM4In17m
.

[rohitverma007]

Great work on this! Just wondering when will this be out of experimental stage since some components such as submit-success fail the AMP validation. I see that there's only one issue left which is in regards to fieldsets validation.

[rudygalfi]

The submit-success validation is being tracked here: #5268 (comment)

[rohitverma007]

@rudygalfi I see, thanks! I hope this is the right place to ask but I was wondering If the form component is no longer prohibited as it passes the validation (after including the amp-form extension) and whether it can be used in production-ready AMP documents. The docs state it is as experimental and also state that experimental components will fail validation.

[rudygalfi]

Experimental means that things might change and could still break your docs without notice. The component is close to stable and we don't anticipate that (in fact, the validation problem I noted in my previous comment is the main thing we're tracking to fix before calling this stable).

[BijuzGit]

HI.. Why is this closed?

On Fri, Oct 28, 2016 at 6:38 AM, Mohammad Khatib notifications@github.com
wrote:

Closed #3343 #3343 via #5815
#5815.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#3343 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AVDPqm0mmlPWZNhDbuBkOznv8WX6kGZaks5q4UsbgaJpZM4In17m
.

[cramforce]

Because it shipped :)

On Thu, Oct 27, 2016 at 8:16 PM, Biju Nair notifications@github.com wrote:

HI.. Why is this closed?

On Fri, Oct 28, 2016 at 6:38 AM, Mohammad Khatib <notifications@github.com

wrote:

Closed #3343 #3343 via
#5815
#5815.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#3343 (comment), or
mute
the thread
<https://github.com/notifications/unsubscribe-auth/
AVDPqm0mmlPWZNhDbuBkOznv8WX6kGZaks5q4UsbgaJpZM4In17m>
.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#3343 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAFeT9JmAgg8xadS2tysCTmweKjEKny-ks5q4WkMgaJpZM4In17m
.