HubSpot onFormSubmit and Other JavaScript Events

Download FREE HubSpot CMS Guide

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

 


Written by: Jake Lett
I share digital marketing tips and HubSpot tutorials to help marketers and business owners grow their business.


Related posts

Tags: , ,

Want to Get Email Updates of New Articles?

Join My Email Newsletter