Duplicate field Ids - creating forms from form template

[Artemiss0]

Hi guys,

We are working on a download form accordion where a client leaves an email addres and company name.
The same form is repeated in each accordion item, for this reason we've created an form template.
The input fields of the forms created from the same form template, all share duplicate input ID's.
Because of the duplicate ID's, when I submit one form, the values get saved in all the other forms. Also the form validation does not work correctly because of the duplicate id's (for example all checkboxes will only fill the value of the first form checkbox)

Is there a way to use multiple forms from the same form template on the same page, without duplicating the input ID's?

[anh-duc-le]

We basically defined an Umbraco Forms template file under /App_Plugins/UmbracoForms/Data/Templates/downloadForm.json

The file looks like this

{
    "name": "Download form",
    "created": "2021-09-03T10:25:42.7504+02:00",
    "pages": [
        {
            "fieldSets": [
                {
                    "caption": null,
                    "sortOrder": 0,
                    "id": "00000000-0000-0000-0000-000000000000",
                    "page": "00000000-0000-0000-0000-000000000000",
                    "containers": [
                        {
                            "caption": null,
                            "width": 12,
                            "fields": [
                                {
                                    "caption": "Company Name",
                                    "tooltip": null,
                                    "placeholder": null,
                                    "cssClass": null,
                                    "alias": "companyName",
                                    "id": "21332849-fb38-4121-bc65-ded04f22863b",
                                    "fieldTypeId": "3f92e01b-29e2-4a30-bf33-9df5580ed52c",
                                    "prevalueSourceId": "00000000-0000-0000-0000-000000000000",
                                    "dataSourceFieldKey": null,
                                    "mandatory": true,
                                    "regex": null,
                                    "requiredErrorMessage": null,
                                    "invalidErrorMessage": null,
                                    "condition": null,
                                    "settings": {
                                        "DefaultValue": ""
                                    },
                                    "preValues": []
                                },
                                {
                                    "caption": "Email Address",
                                    "tooltip": null,
                                    "placeholder": null,
                                    "cssClass": null,
                                    "alias": "emailAddress",
                                    "id": "6e1b7035-786f-4253-8c73-ee93c4db0644",
                                    "fieldTypeId": "3f92e01b-29e2-4a30-bf33-9df5580ed52c",
                                    "prevalueSourceId": "00000000-0000-0000-0000-000000000000",
                                    "dataSourceFieldKey": null,
                                    "mandatory": true,
                                    "regex": null,
                                    "requiredErrorMessage": null,
                                    "invalidErrorMessage": null,
                                    "condition": null,
                                    "settings": {
                                        "DefaultValue": ""
                                    },
                                    "preValues": []
                                },
                                {
                                    "caption": "Document Name",
                                    "tooltip": null,
                                    "placeholder": null,
                                    "cssClass": null,
                                    "alias": "documentName",
                                    "id": "019e78fc-6fc6-4c98-9d33-e8f9382f3b4d",
                                    "fieldTypeId": "da206cae-1c52-434e-b21a-4a7c198af877",
                                    "prevalueSourceId": "00000000-0000-0000-0000-000000000000",
                                    "dataSourceFieldKey": null,
                                    "mandatory": false,
                                    "regex": null,
                                    "requiredErrorMessage": null,
                                    "invalidErrorMessage": null,
                                    "condition": null,
                                    "settings": {
                                        "DefaultValue": ""
                                    },
                                    "preValues": []
                                },
                                {
                                    "caption": "Document Version",
                                    "tooltip": null,
                                    "placeholder": null,
                                    "cssClass": null,
                                    "alias": "documentVersion",
                                    "id": "8be17774-42ff-4db2-9900-ef4655ab0384",
                                    "fieldTypeId": "da206cae-1c52-434e-b21a-4a7c198af877",
                                    "prevalueSourceId": "00000000-0000-0000-0000-000000000000",
                                    "dataSourceFieldKey": null,
                                    "mandatory": false,
                                    "regex": null,
                                    "requiredErrorMessage": null,
                                    "invalidErrorMessage": null,
                                    "condition": null,
                                    "settings": {
                                        "DefaultValue": ""
                                    },
                                    "preValues": []
                                },
                                {
                                    "caption": "Document Publication Date",
                                    "tooltip": null,
                                    "placeholder": null,
                                    "cssClass": null,
                                    "alias": "documentPublicationDate",
                                    "id": "f8920818-f63a-4e0a-90fb-c97367a20b63",
                                    "fieldTypeId": "da206cae-1c52-434e-b21a-4a7c198af877",
                                    "prevalueSourceId": "00000000-0000-0000-0000-000000000000",
                                    "dataSourceFieldKey": null,
                                    "mandatory": false,
                                    "regex": null,
                                    "requiredErrorMessage": null,
                                    "invalidErrorMessage": null,
                                    "condition": null,
                                    "settings": {
                                        "DefaultValue": ""
                                    },
                                    "preValues": []
                                }
                            ]
                        }
                    ]
                }
            ],
            "caption": "",
            "sortOrder": 0,
            "id": "00000000-0000-0000-0000-000000000000",
            "form": "00000000-0000-0000-0000-000000000000"
        }
    ],
    "id": "0369af3b-8b18-438b-8b3a-87feedec84ea",
    "fieldIndicationType": "MarkMandatoryFields",
    "indicator": "*",
    "showValidationSummary": false,
    "hideFieldValidation": false,
    "requiredErrorMessage": "Please provide a value for {0}",
    "invalidErrorMessage": "Please provide a valid value for {0}",
    "messageOnSubmit": "Thank you",
    "goToPageOnSubmit": 0,
    "xPathOnSubmit": null,
    "manualApproval": false,
    "storeRecordsLocally": true,
    "disableDefaultStylesheet": false,
    "workflows": [],
    "datasource": null,
    "submitLabel": "Download",
    "nextLabel": "Next",
    "prevLabel": "Prev"
}

The problem is that every form created through this Form template is generated with the same input field IDs.

So you can have three different forms, but all of them have the same ID for the "companyName" field: "21332849-fb38-4121-bc65-ded04f22863b"

What we want to achieve is a form template that allows us to quickly create multiple new forms that all have the same input field structure.

We have tried the following things

• Set "id" to "00000000-0000-0000-0000-000000000000". This does not trigger umbraco to generate new GUID values. Instead all fields will have the same GUID
• Set "id" to null. This will cause the template to not show up in the backoffice
• Not set "id". This will cause the template to not show up in the backoffice
• Create new forms by duplicating an existing form. This does not change the field IDs on the newly copied form, causing the new forms to also have the same input field IDs.

[AndyButland]

What version of Umbraco Forms are you using please @anh-duc-le?

[anh-duc-le]

@AndyButland I see that we are on version 8.6.2 of Forms. I guess it should be worth trying to upgrade and see if it still persists in the latest version?

[AndyButland]

Yes, if you upgrade you should find the last option you've noted - copying a form - will generate a new form with unique IDs. We introduced that change in a version after 8.7.0.

We expect to have a similar fix in place for the upcoming 8.9 release for generating forms from the templates (which is what this open issue is specifically about).

[AndyButland]

Resolved via the PR linked above and due in 8.9.0 and 9.1.0.