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_<FORM ID>_<FORM INSTANCE ID>.

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? Join the discussion in our developer forums.