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, you will need to revisit your existing forms.
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> 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.
This change will result in the form element
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.
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.