including the same form multiple times creates duplicate CSS-IDs

[fritzmg]

If you include the same form multiple times on a page, each form will get the same CSS-ID, e.g. id="f1".

Though I wonder now, is inserting the same form multiple times on the same page (i.e. once in the header and once in the footer) not a supported use case?

[ausi]

I think this is related to contao/core#8538 (comment)

[fritzmg]

Hm, yes I thought so too, I wasn't sure though since the original issues was about the page cache.

[leofeyer]

Fixed in bd3c749.

[fritzmg]

This is not fixed completely. Including the same form multiple times on a page will still cause duplicate CSS-IDs. While it is fixed for the CSS-ID of the <form> itself, it still happens for each individual form element, eg.

<input name="email" id="ctrl_1" class="text mandatory" value="" placeholder="Email …" required="" type="email">
…
<input name="email" id="ctrl_1" class="text mandatory" value="" placeholder="Email …" required="" type="email">

[leofeyer]

@contao/developers I think changing the form field IDs is a BC break, isn't it? The ID could be used in a CSS or JS selector. Then again we have removed the default form ID … 😄

[fritzmg]

Indeed. I know of at least one extension that relies on the form field CSS IDs.

Could it be done for Contao 4.5?

[Toflar]

I guess it's just a known limitation that you cannot use the very same form on the same page. The ctrl_<n> is only one problem but you would generate two identical FORM_SUBMIT values so the first one would actually respond to the form submit of the second one. Even if there were errors, the first one would show them instead of the second one. It's not really worth fixing if you ask me.