Global Form Event Listener for HubSpot Forms (JavaScript)

[AJLaPorte_diagr]

This is to record a conversation from the HubSpot Developer Slack regarding the question in the title. Not in the developer slack? Join it here

Josh Saunders [9:18 AM]
Different question, does anyone know how I can change the value of a hidden form field based on what page the form is on? Have 50 pages that need to use the same form, but need a hidden field to set a contact property based on what page they submit the form on. We're using the HubSpot CMS and I don't see anywhere in the form module or form embed code to change the hidden field. What's the easiest way to set a hidden form field? Or do I have to create a module to insert in all the pages and use HUBL and JS to build my own front-end form and POST it to the API? (I'm not even sure how or if you can make API requests in a HubSpot module). Any direction would be greatly appreciated!

AJ LaPorte [9:35 AM]
I would use JS to populate the field though it may require you checking if the form loaded. Also, you can use the form embed code and then use the onFormReady to do it as well (https://developers.hubspot.com/docs/methods/forms/advanced_form_options).

As far as using the API in a Hubspot Module, I would not recommend doing this as you would be exposing your API Key, another workaround for this though can be done using the method here: https://www.kelp.agency/blog/how-to-enable-cors-ajax-requests-for-any-hubspot-api (from @stefen)

Stefen Phelps [9:44 AM]
you can also listen for the global form event if you don't want to use the embed code e.g.:

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

[rajan]

@AJLaPorte_diagr I wanted to capture the response after form submission. Is there any doc or something i can take an idea?
Thanks

Best Regards

Rajan

[BAmadori]

Very useful! Thank you for sharing!

[jennysowyrda]

Thanks for bringing this over, @AJLaPorte_diagr!