HubSpot onFormSubmit and Other JavaScript Events

When embedding a HubSpot form using the JavaScript script tag it is common to want to apply some of your own functions after the form has submitted. This can be used for adding conversion pixels for Google Ads and Facebook after the form is submitted. Another use case is modifying the form markup after the form has loaded.

Source

onFormSubmit

Called when the form starts to submit but has not completed

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
       console.log("Form Submit started");
   }
});

onFormSubmitted

Called after the form is submitted

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
       console.log("Form Submitted!");
   }
});

onBeforeFormInit

Called before form is inserted on the page

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onBeforeFormInit') {
       console.log("HubSpot Form starting to load");
   }
});

onFormReady

Called after the form is loaded on the page

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
       console.log("HubSpot form added to page");
   }
});