How to Track HubSpot Form Submission Events with Javascript

Tracking form submissions is crucial for understanding user behavior, optimizing conversions, and integrating with other analytics tools. HubSpot forms offer JavaScript events that can be used for various purposes, such as triggering custom actions upon form load or submission. In this post, we'll discuss how to utilize these events effectively, provide a code example, and explain where to place the code within HubSpot's page editor.

Understanding HubSpot Global Form Events

HubSpot provides a comprehensive set of global form events that allow you to track various interactions with your forms. These events can be used to capture form submissions, validate form inputs, and perform other custom actions.

By understanding the different global form events offered by HubSpot, you can effectively track form submission events and enhance the functionality of your forms.

This will work also if your HubSpot form is not in a HubSpot page, meaning you can hook to these events in WordPress, custom CMS or SPA (single page application).

Key JavaScript Events in HubSpot Forms

HubSpot offers some key events that can be utilized to track form submissions in Javascript. These events include:

• onBeforeFormInit: Called before the form has been inserted into DOM.
• onFormReady: This event is triggered when a form is fully loaded into DOM and ready to be interacted with.
• onBeforeFormSubmit: This event is triggered at the start of a form submission, but before submission has been persisted.
• onFormSubmitted: This event is triggered after a form is successfully submitted and the submission has been persisted.

Tracking HubSpot Form Submissions

To track HubSpot form submissions in Javascript, you can use the onFormSubmitted event. This event is triggered after a form is successfully submitted, allowing you to perform custom actions such as sending data to external analytics tools or displaying a success message to the user.

Here is an example code snippet that demonstrates how to track form submissions using the onFormSubmitted event:

window.addEventListener('message', event => {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
        someAnalyticsLib('formSubmitted');
        console.log(`Form Submitted! Event data: ${event.data}`);
    }
});

By adding this code to your page and replacing 'your-form-id' with the ID of your HubSpot form, you will be able to track form submissions and apply custom logic.

Explanation

1. Event Listener Setup: We set up an event listener on the window object to listen for message events.
2. Condition Check: We check if the event type is hsFormCallback and the event name is onFormSubmitted.
3. Custom Actions: If both conditions are met, we call a hypothetical analytics function (someAnalyticsLib) and log a message to the console.

Where to Place the Code

When tracking HubSpot form submissions in Javascript, it is important to place the code in the appropriate location to ensure it is executed at the right time.

The recommended approach is to place the code on the header or just before the closing body tag. If you are using HubSpot, go to your page Settings -> Advanced -> Additional code snippets and paste the code there and remember to wrap your code with the script tag.

Wait for the HubSpot form to load!

When tracking HubSpot form submissions in JavaScript, it is crucial to wait for the form to fully load before attaching event listeners.

This is because the form elements may not be available in the DOM until the form is completely loaded. If you try to attach event listeners before the form is ready, the code will not work as expected.

To ensure that the form is fully loaded, you can utilize the onFormReady event provided by HubSpot. This event is triggered when the form is fully loaded and ready to be interacted with.

Here is an example code snippet that demonstrates how to wait for the form to load before attaching event listeners:

window.addEventListener('message', event => {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
        console.log(`HubSpot Form has been inserted into DOM and is ready!`);
    }
});

By using the onFormReady event, you can ensure that the necessary form elements are available in the DOM before running your code.

My code is not working, what should I do?

If you are trying to modify a field using the onFormReady event and nothing happens, then probably you are inserting the HubSpot form with HubSpot styles. This causes HubSpot to insert the form within an iframe, and HTML code within iframes can't be accessed with JavaScript.

To change this behavior, go to your Form -> Style & Preview and enable this option: 

Remember to click Update. Now HubSpot will insert the form directly into your HTML code without iframe.

Conclusion

By understanding the global form events offered by HubSpot and utilizing the appropriate event listeners, you can effectively track form submissions, handle errors, and apply custom logic.

Remember to place the tracking code in the correct location, wait for the form to fully load, and test your implementation to ensure it is working as expected.