New Functionality: Global Form Events

forms

#1

What's Happening?

Historically, callbacks embedded in the HubSpot form embed code were the only way to trigger custom code on certain HubSpot form events (e.g. on form submission). Now, developers will be able to listen for global form events as well, allowing custom code with greater flexibility and extensibility.

What's Changing?

Nothing; this is entirely new functionality! Developers can continue to use the existing form callback functionality as before.

When is this happening?

Global form events are now live; developers can begin using them immediately! Check out the documentation here: https://developers.hubspot.com/global-form-events

Questions? Join the discussion below!


#2

Hi! i´ll like to use this to push and event with GTM so the event fires every time a form is submitted, is this possible?

i saw that the code would be like:

 // Global event
    {
        type: 'hsFormCallback',
        eventName: 'onFormSubmitted',
        id: 'Id of form submitted',
        data: {}
    }

but where do i add the dataLayer script? in the embed form code it would be something like this:

<script>
  hbspt.forms.create({ 
    css: '',
    portalId: 'XXXXXX',
    formId: '012aaa7e-03df-4c38-83fb-63474af1c182',
    onFormSubmit: function($form) {
		window.dataLayer = window.dataLayer || [];
		
		window.dataLayer.push({
                        'event' : 'conversion',			
		});
	}
  });
</script>

How could i do it in the global code?


#3

Hi @guidanecete,

You'd be able to put the listener code pretty much anywhere, since the form events are global. The listener would look something like this:

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
       //Do Something
   }
});

#4

Are there any events available for Hubspot Conversations / Live Chat so could also push them via GTM dataLayer?

Something like:

  window.addEventListener('message', event => {
    if(event.data.type === 'hsMessages' && event.data.eventName === 'ChatStarted') {
      window.dataLayer.push({
      'event' : 'LiveChat',

Thanks


#5

Hi @design_man,

There aren't currently any global events related to the live chat functionality. I can totally see the use case for that, though; If you have the inclination, I would encourage you to check out the Ideas Forum on the HubSpot Community. That's where we're aggregating all product feedback/ideas, and it's the best place to make your idea visible to HubSpotters and other devs/customers. I'd also recommend linking to the idea from here so that other Dev Forum members can easily find it!


#6

Hi, I'm integrating the Global Form Events with Tag Manager.

Is there any way to access the form data?

{
	"type": "hsFormCallback",
	"eventName": "onFormSubmit",
	"id": "...",
	"data": {}
}

I'm getting the event just fine, but the data inside is empty (above object is the event).
According to the docs the data should be an array with form fields and values submitted.

(I can fetch the values accessing the DOM, however a cleaner solution like the one shown in the docs would be much preferred)

EDIT: apparently this started working magically, the data array is now coming with the fields names and values