Multiple instances of the same form get cascading ID

[scandella]

What happened?

I display multiple Instances of the same form on one page.

{{ myForm.render({
	attributes: {
		id: "form-1",
		fieldIdPrefix: 'myform-1-',
	}
}) }}
{{ myForm.render({
	attributes: {
		id: "form-2",
		fieldIdPrefix: 'myform-2-',
	}
}) }}

The second form gets id="form-1 form-2" fieldidprefix="myform-1- myform-2-", and so on for form 3, 4…
There is no way to add different attributes for the same field to the various instances: they all get the same attributes as the first one.

Errors and Stack Trace (if available)

No response

How can we reproduce this?

1. Render multiple instances of the same form with different ID

Freeform Edition

Pro

Freeform Version

5.6.4

Craft Version

Craft Pro 4.12.5

When did this issue start?

No response

Previous Freeform Version

No response

[jannisborgers]

I think the id and fieldIdPrefix belongs outside of attributes, at least that is how I got it to work:

{{ myForm.render({
-	attributes: {
+	id: "form-1",
+	fieldIdPrefix: 'myform-1-',
-	}
}) }}
{{ myForm.render({
-	attributes: {
+	id: "form-2",
+	fieldIdPrefix: 'myform-2-',
-	}
}) }}

[scandella]

Hi @jannisborgers
Using

{{ myForm.render({
		id: "form-1",
		fieldIdPrefix: 'myform-1-',
}) }}
{{ myForm.render({
		id: "form-2",
		fieldIdPrefix: 'myform-2-',
}) }}

did not work for me: no IDs are set for the multiple-form instances.
I need to display multiple instances of a form on the same page with different values for each, but it does not work, probably because the form doesn't get a specific ID.
How do you think I could solve this?

[scandella]

In the V5 doc, I see:

{{ form.render({
    attributes: {
        novalidate: true,
        "data-form": true,
        id: "my-form-id",
        class: "my-form-class",
        row: {
            "data-row": true,
            class: "form-row",
        },
  …

But in the same doc there is:

    {{ freeform.form("myFormHandle").render({
        id: "form-one",
        fieldIdPrefix: "form-one-"
    }) }}

None of them works for me. The first one injects no ID in the form and the second one makes ID cascading from form to form.

[kjmartens]

Hi @scandella,

Sorry for the delay...

fieldIdPrefix is more of a setting than a form attribute, so it belongs outside of attributes as @jannisborgers mentions. I apologize for the code examples in the guide not being updated for Freeform 5. I will update those shortly.

The correct approach should be:

<h1>First Instance of Form</h1>
{{ freeform.form("myFormHandle").render({
    attributes: {
        id: "form-one",
    },
    fieldIdPrefix: 'myform-one-',
}) }}

<h1>Second Instance of Form</h1>
{{ freeform.form("myFormHandle").render({
    attributes: {
        id: "form-two",
    },
    fieldIdPrefix: 'myform-two-',
}) }}

In my testing, this works for the most part. I can, however, duplicate the issue where the second form gets id="form-one form-two". I have noted that issue and we'll see what we can do about it. 🙂

[scandella]

@kjmartens
Thanks for your answer.
So you have the cascading ID issue too.
However, my issue remains the same.
I need multiple instances of the same form on the same page to receive different values for the same field.
So, thanks to our clarification, I do:

<h1>First Instance of Form</h1>
{{ freeform.form("myFormHandle").render({
    attributes: {
        id: "form-one",
    },
	fields: {
		"aField": {
		label: "foo"
		}
     },
    fieldIdPrefix: 'myform-one-',
}) }}

<h1>Second Instance of Form</h1>
{{ freeform.form("myFormHandle").render({
    attributes: {
        id: "form-two",
    },
	fields: {
		"aField": {
		label: "bar"
		}
     },
    fieldIdPrefix: 'myform-two-',
}) }}

But "aField" of Form 2 always displays "foo", instead of "bar".
I thought it was due to the ID malformation, but maybe these are two different issues.

Thanks for your help, I'm stuck on a project with that problem.

[jannisborgers]

Form IDs work with "=id": instead of id:. It made the cascading form IDs go away.

When referencing a specific field by it’s handle, it only works with label: and "label":, but does NOT work with "=label":, which is confusing.

Label attributes do not work with multiple forms, though. When including the same form, once the form has been rendered, the new form options seem to be ignored:

This template:

{% set form = freeform.form("formHandle") %}

{% set changeHandle = false %}

{% for index, item in 0..1 %}

  {# Dump to compare #}
  {{ d("changeHandle:", changeHandle) }}

  {# Define formOptions #}
  {% set formOptions = {
    fields: {
      "email": {
        label: changeHandle == false ? "foo" : "bar",
      }
    }
  } %}

  {# Dump options #}
  {{ d("formOptions:", formOptions) }}
  {{ d("label:", formOptions.fields.email.label) }}

  {# Render form #}
  {{ form.render(formOptions) }}

  {# Switch handle after 2 iterations #}
  {% if index == 0 %}
    {% set changeHandle = true %}
  {% endif %}

  <hr>

{% endfor %}

results in this output:

[scandella]

Thanks @jannisborgers for confirming the problem.
Is it a bug or is it by design?
@kjmartens How can we get multiple instance of a form on same page with different field options?

[scandella]

@jannisborgers Form IDs work with "=id": instead of id:. It made the cascading form IDs go away.
You are right. Good luck to understand this from the documentation!
Now I have different ID for each instance of the same form, but issue remains: the fields do not get their respective option, as you mentioned.

[scandella]

With each instance getting is own ID now, I ended up replacing the label text with some JS. Not ideal…