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");
   }
});

 

About the Author

Jacob Lett is the founder of Bootstrap Creative, a digital marketing consultancy that helps Michigan manufacturers generate qualified leads through HubSpot, technical SEO, and Google Ads. With over a decade of hands-on experience, he acts as a direct partner for B2B companies seeking measurable ROI from their marketing investment.



Related posts

Tags: , ,

| Read My Editorial Policy

Want to Get Email Updates of New Articles?

Join My Email Newsletter