Amphtml: Support Linker in amp-form

[lannka]

Like how we listen to anchor tag clicks and dynamically append IDs to outgoing links, we will need to do so for form action URLs.

However, when a form is submitted via form.submit(), no submit event is dispatched in DOM hence we could not append the IDs on submit. (see demo here )

One way is for amp-analytics to scan the page and inject hidden element <input type=text name=paramName value=linkerString> to every form on the page. But it never know if it finds all forms, and if there will be more loaded later to the page.

@aghassemi any thoughts how this should be done?

[Geekgurus]

@lannka You need to use https for your form's action-xhr URL.

Pls you can drop the page url to let see if It looks like https is set up for your site, so you should just have to change the action-xhr URL.

And also make use of the Chrome Dev tool to check your errors, to have a notice error in your page. Such as AMP-Access-Control-Allow-Source-Origin header. It should just be the origin, e.g. http://amp.site.com/ and it should not include the path to the specific page form.html.

I hope this helps! Let us know if you have more questions.

[aghassemi]

@lannka amp-form itself had to deal with a similar issue (finding new form elements to attach our behaviour to it). What currently happens is that we listen to AmpEvents.DOM_UPDATE event and requery for form elements. You can do a similar thing.

[lannka]

@aghassemi another idea is to introduce a global service

formSubmitService.beforeSubmit(function(formElement) {
  ...
});

/cc @calebcordry

[aghassemi]

@lannka I like that idea, would be able to run synchronously as opposed to the event approach. I am +1 for this approach, /cc @cvializ for approval. Carlos, in short, discussions have been around finding the best way to inject a input hidden into forms as needed by the linker.

[lannka]

Thanks @aghassemi

@calebcordry already had a draft PR for approach 1, but the part I don't like is:

• it listens to DOM_UPDATE events (which are mainly from amp-list) to re-scan the page for forms.
• because the re-scan, to avoid injecting duplicated hidden input, we had to keep state and remember which form has been treated (had to introduce ID etc)

Approach 2 would resolve those 2 problems.

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. @calebcordry Do you have any updates?

[calebcordry]

18502, #18497, #18368 Added this functionality to linker.

18752 Turned on the experiment so it should be shipping to production with the next promotion. Will verify that everything is working correctly and then this task can be marked as completed.

[ampprojectbot]

This is a high priority issue but it hasn't been updated in awhile. @calebcordry Do you have any updates?

[calebcordry]

This is now live in prod.