Form block: Duplicating a form does not create a unique entity

[jp-imagines]

Impacted plugin

Jetpack

Quick summary

If you want to have multiple unique forms on a single page, duplicating (or copy/pasting) an existing Form block may be the fastest method to do so. However, in some cases, duplicating a form causes both copies to be treated as the same entity with the same ID/hash. On submission, the forms generate the same output, matching the last duplicate copy (or last updated copy), even if the forms have different fields.

Steps to reproduce

1. Create a new page.
2. Add a Form block. Select one of the presets or set up your own.
3. Duplicate the entire Form block.
4. On the duplicate copy, add or remove one or more fields.
5. Save the page.
6. Fill out and submit either of the forms. Revisit the page afterward, and then fill out and submit the other form.

A clear and concise description of what you expected to happen.

Despite being duplicated, I expect both forms should be unique entities. Filling out Form A should yield a submission with Form A's information, and same for Form B.

What actually happened

In some cases, the two forms are treated as two copies of the same form. Submissions follow the format/fields list for the duplicate copy (or last updated copy?); when submitting the original form, any unique fields in that form are lost, and any fields present in the duplicate but not in the original are present and empty.

Example 1: Duplicate form has a new field added. On submission, even the original form shows this field.

Example 2: Duplicate form has a field removed ("message"). On submitting the original copy (with a "message"), that info is lost.

On inspecting the Forms in the browser inspector, both forms have the same contact-form-hash.

Of note: some changes seem to cause the duplicate Form to obtain a new ID/hash and be treated as a new entity. I think any change to the Form block itself (not the inner blocks/fields) does this.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Atomic

Logs or notes

Only consistent workaround is to rebuild the duplicated forms from scratch. Making changes to the Form blocks themselves (the parent block) might also fix things.

[jp-imagines]

Initial report: 6774630-zd-a8c

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 6774630-zen

[cuemarie]

📌 REPRODUCTION RESULTS

• Tested on Simple – Replicated
• Tested on Atomic – Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO Replicated as described across simple and AT.

If the 2 forms, which were created using duplicate, contain different required fields, this can also mess with a site visitor's ability to submit the form, as in this example:

https://github.com/Automattic/jetpack/assets/27249804/0396bcee-0929-4287-8fa2-47ff8ccf4c13

I think any change to the Form block itself (not the inner blocks/fields) does this.

I tried this on my AT site by changing the submission results of Form 2, however both forms still contained the same id (id="contact-form-XX")

[github-actions[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive for the past 6 months.
• It hasn’t been labeled `[Pri] BLOCKER`, `[Pri] High`, `[Type] Feature Request`, `[Type] Enhancement`, `[Type] Janitorial`, `Good For Community`, `[Type] Good First Bug`, etc.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[davemart-in]

Moving to Jetpack forms board.