- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
Upcoming: Form element ID attribute is being changed to be more unique
3 weeks ago
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
Jon McLaren
Sr. CMS Developer Advocate
- Get started developing on the HubSpot CMS
- CMS and API changelog
- Dev Locally!
- Share your work in the Code Gallery
If my reply answered your question, please mark it as a solution, to make it easier for others to find.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content