Upcoming: Form element ID attribute is being changed to be more unique

[jmclaren]

HubSpot forms render a <form> element with a unique id attribute for each page on which the form is used. However, when multiple instances of the same form are added to the same page, the id for each form may not be unique. To resolve this, the id attribute is being changed. If you are targeting form styling or extra javascript functionality based on the id attribute, you will need to revisit your existing forms.

What's Changing?

HubSpot forms render a <form> element with a unique id attribute for each page on which the form is used, formatted as hsForm_<formID>. If a formInstanceId has been provided when customizing the HubSpot form Script, the id attribute looks like this: hsForm_<formID>_<formInstanceID>. 

If a form is added to the same page multiple times, and a formInstanceId has not been specified, we render multiple HTML elements with the same id. To fix this, form elements include a <TARGET_ID> attribute: hsForm_<FORM ID>_<TARGET_ID>. <TARGET_ID> can be specified through target. If target isn't specified, an id will be randomly generated on render. All forms should then have unique id attributes.

How will existing forms be affected?

This change will result in the form element id changing. This could break any css or javascript that uses the element id to target specific forms.

To allow developers to continue targeting forms by form id, a new css class, hs-form-<form ID>, is being added to the element. This class is already available so you can begin transitioning to these classes. The data-form-id attribute will not be changing. For a full description of all the elements rendered and how to use them for targeting, please see this article.

When is this happening?

The id attribute update will happen May 19th, 2020. Please correct your css and js selectors before then to prevent styling issues.

Questions? Ask below

[jgreve]

I have two identical form embed scripts on a page, and right now they're both being generated with the same ID. Obviously this isn't ideal. The form has "Set as raw HTML form" turned on.

Given this update, this should not be the case, right?

[nikolajovanovic]

Hello,

Will some old classes such as "hsForm-{id}", "hsForm_{id}" stay as it's today? And will it change "id" only in case 2 forms are on the same page or it also changes the "id" in case there's a single form?

Best regards,

Nikola

[jmclaren]

Hi there @nikolajovanovic the classes you should be relying on are specifically noted here: https://designers.hubspot.com/docs/cms/hubspot-form-markup#targeting-a-form-based-on-it-s-form-id

Those are the classes we are committing to protecting for developer styling and targeting purposes.

If only one instance of the form exists it may stay the same however you shouldn't be using that for targeting still, because if you have a flexible column or dnd_area on the page a content creator could add a new form to the page, causing the styling or javascript to stop affecting the form.

[Kennan_wmk]

Will this affect form embed codes?

[jmclaren]

@Kennan_wmk Yes it will affect SOME forms embedded using embed codes.

Forms that are using themes, and therefore are using an iframe - those forms are not affected.

Forms that are not targetted using the id attribute for styling or javascript will not be affected.

Forms that do not use form themes, and ARE targeted by CSS or Javascript using the id attribute as the selector, will be affected.

Hopefully that makes it clear. Let us know if you have any further questions.

[Kennan_wmk]

Thanks for the reply!

This info is certainly helpful. However, I should have been more clear with my question. What I meant to ask was if the embed codes themselves will be affected.

For example, if I have an embed code that I have used on a page, will that embed code need to be adjusted at all or will I only need to adjust css/js that uses the form's id?

[jmclaren]

The javascript embed codes you get from within the forms tool do not need to be updated/replaced. The HubL form embed code also does not need to be updated/replaced.

The HTML the script generates is controlled by HubSpot and will be updated from our end.

Only custom non-hubspot generated CSS/JS that uses the form element's id attribute needs to be updated.