Form Block: Add unique form id to form block

[buzztone]

What problem does this address?

Initial development of the experimental Form Block does not include a unique form id for each form block.

Initial development:

• Feature suggestion: Form & input blocks Feature suggestion: Form & input blocks WordPress/gutenberg#44186
• Introduce experimental form & inputs blocks to allow building basic forms Introduce experimental form & inputs blocks to allow building basic forms WordPress/gutenberg#44214

Several comments on this initial development discuss the need for a suitable form id:

• How would we identify the form for the hook? It's possible to have multiple forms on a single page, right? It's also possible to (intend to) have the same form across multiple pieces of content. In those cases, leaning on the post ID isn't enough.
• I don't know yet... There would have to be some identifier for the forms, I didn't get that far in my proof of concept. I'm sure we can find a solution though, there's plenty of things we can do!
• I think a unique ID for each form would be needed, and additionally:
  Most form plugins ask user for a unique name (and slug), I suppose this could be added in the block (such as template-part name modal).
• No problem 😄. Just thinking through the challenges.
  I can see the necessity of a form ID, but where would that be stored?
• Probably as an attribute in the form (wrapper) block .
• Feature suggestion: Form & input blocks WordPress/gutenberg#44186 (comment)

Analysis of form id’s used by the existing form plugins

After looking at the range of form id’s used by the existing form plugins I reached the following conclusions:

• All plugins generate a unique form id for each form
• Most commonly form ids are built from 3 parts separated by ‘-‘
• ‘wpf’ is suitable as starting part (WordPress Form)
• 3 random generated characters are suitable following parts
• Most form plugins add the form id in the html form tag
• Some form plugins extend the form id to include a page or tab number e.g. ‘wpf-###-###-##’

Refer to Form Plugin Analysis Results.

What is your proposed solution?

I suggest using <form id= “wpf-###-###”> for each form & saving this in the block attributes.

• Unique form id added in modified version of useInstanceId.ts available only in experiment

This follows the characteristics identified from detailed analysis of form id’s used by existing popular form plugins in WordPress Plugin Directory.

Refer to Form ID Suggestion.