Let’s say you need to change a class on a specific input. Or, maybe you need to remove some extra
Since HubSpot form embeds are powered by React, you can’t simply wait for the document ready event to fire. HubSpot forms get added to the DOM after the fact. To solve this problem in the past, I would wait for the window load event, or, if that wasn’t reliable enough, I’d poll the page every second looking for the
.hs-form class before calling my function 🤢. Thankfully, this hackery is no longer needed. As of a few months ago, HubSpot now has Global Form Events! 🎉
Now you can add an event listener that will call your function after the form has been inserted into the DOM like so:
Why would you want to manipulate a HubSpot form embed anyway? Well, now you can add floating labels to your forms like in this CodePen:
You could also integrate other analytic platforms or track specific events or even send the form data to a completely separate platform. It makes using HubSpot forms for complex things much easier.