---
title: Manipulate HubSpot Forms with JavaScript—the Right Way
description: Manipulate HubSpot Forms with JavaScript—the Right Way
image: https://corporate.kelp.agency/hubfs/Imported_Blog_Media/hubspot-form-floating-label-1136x430.gif
---

[![Kelp Creative Agency](https://corporate.kelp.agency/hs-fs/hubfs/Kelp_H_Logo_Color_Primary_Simple-PNG.png?width=120&height=61&name=Kelp_H_Logo_Color_Primary_Simple-PNG.png "Kelp Creative Agency")](https://corporate.kelp.agency/)

 Menu

- [Home](https://corporate.kelp.agency)
- About 
    - [Who We Are](https://corporate.kelp.agency/who-we-are)
    - [What We Do](https://corporate.kelp.agency/what-we-do)
- [Landing Page](https://corporate.kelp.agency/landing-page)
- [Blog](https://corporate.kelp.agency/blog)
- [Contact](https://corporate.kelp.agency/contact)

# Corporate Blog

Select a Topic HubSpot How-Tos Company News Design Dives Featured Content Creation WordPress Strategy Struts Web Development

 Subscribe

[Share via Facebook](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fcorporate.kelp.agency%2Fblog%2Fmanipulate-hubspot-forms-with-javascript-the-right-way) [Share via Twitter](https://twitter.com/intent/tweet?url=https%3A%2F%2Fcorporate.kelp.agency%2Fblog%2Fmanipulate-hubspot-forms-with-javascript-the-right-way&text=Manipulate+HubSpot+Forms+with+JavaScript%26mdash%3Bthe+Right+Way) [Share via Email](mailto:?subject=Manipulate+HubSpot+Forms+with+JavaScript%26mdash%3Bthe+Right+Way&body=https%3A%2F%2Fcorporate.kelp.agency%2Fblog%2Fmanipulate-hubspot-forms-with-javascript-the-right-way) [Share via LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fcorporate.kelp.agency%2Fblog%2Fmanipulate-hubspot-forms-with-javascript-the-right-way&title=Manipulate+HubSpot+Forms+with+JavaScript%26mdash%3Bthe+Right+Way&summary=Manipulate+HubSpot+Forms+with+JavaScript%E2%80%94the+Right+Way)

![](https://corporate.kelp.agency/hubfs/Imported_Blog_Media/hubspot-form-floating-label-1136x430.gif)

[Featured](https://corporate.kelp.agency/blog/tag/featured), [HubSpot How-Tos](https://corporate.kelp.agency/blog/tag/hubspot)

# Manipulate HubSpot Forms with JavaScript—the Right Way

By [Stefen Phelps](https://corporate.kelp.agency/blog/author/stefen) on Oct 17, 2018 12:08:11 PM

Let's say you need to change a class on a specific input. Or, maybe you need to remove some extra `div`s in order to get that specific layout needed. Being the snazzy developer that you are—you think to yourself, simple enough! I'll just adjust the form embeds with some JavaScript and call it a day... but your script isn't working...

![hubspot form with floating labels](https://corporate.kelp.agency/hubfs/Imported_Blog_Media/hubspot-form-floating-label-1136x430.gif)

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](https://developers.hubspot.com/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:

```
window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
       // the form is ready to manipulate!
   }
});
```

---

## The Possibilities

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:

See the Pen [HubSpot form with floating labels](https://codepen.io/stefen/pen/wybOYy/) by Stefen ([@stefen](https://codepen.io/stefen)) on [CodePen](https://codepen.io).

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.

## Related Posts

[![](https://corporate.kelp.agency/hs-fs/hubfs/Imported_Blog_Media/simple-social-sharing-custom-module-1024x610.png?width=400&name=simple-social-sharing-custom-module-1024x610.png)](https://corporate.kelp.agency/blog/simple-social-sharing-free-hubspot-custom-module) [Company News](https://corporate.kelp.agency/blog/tag/company-news)

## [Simple Social Sharing—Free HubSpot Custom Module](https://corporate.kelp.agency/blog/simple-social-sharing-free-hubspot-custom-module)

Jul 27, 2018 11:17:50 AM

[![](https://corporate.kelp.agency/hs-fs/hubfs/Imported_Blog_Media/load-more-posts-wordpress-1136x430.gif?width=400&name=load-more-posts-wordpress-1136x430.gif)](https://corporate.kelp.agency/blog/add-load-more-posts-button-wordpress-without-plugin) [WordPress](https://corporate.kelp.agency/blog/tag/wordpress)

## [Add an AJAX Powered Load More Posts button to your WordPress Blog without a Plugin](https://corporate.kelp.agency/blog/add-load-more-posts-button-wordpress-without-plugin)

Oct 13, 2018 6:47:37 PM

[![](https://corporate.kelp.agency/hs-fs/hubfs/Imported%20images/Better-HubSpot-Breadcrumbs.png?width=400&name=Better-HubSpot-Breadcrumbs.png)](https://corporate.kelp.agency/blog/better-hubspot-breadcrumbs) [HubSpot How-Tos](https://corporate.kelp.agency/blog/tag/hubspot)

## [Better HubSpot Breadcrumbs](https://corporate.kelp.agency/blog/better-hubspot-breadcrumbs)

Jun 11, 2020 10:23:03 AM

### Ready to take your business to the next level?

Schedule a free consultation today.

 Learn More about {{item.heading}}

- [Home](https://corporate.kelp.agency)
- About 
    - [Who We Are](https://corporate.kelp.agency/who-we-are)
    - [What We Do](https://corporate.kelp.agency/what-we-do)
- [Landing Page](https://corporate.kelp.agency/landing-page)
- [Blog](https://corporate.kelp.agency/blog)
- [Contact](https://corporate.kelp.agency/contact)

 © 2026 Kelp Creative Agency, All Rights Reserved.