Track and Store Local Form Submission Count for HubSpot

Other Questions HubSpot
1

I’m running a WordPress site with a HubSpot form embedded using their JavaScript. I need to keep a local tally of form submissions.

When checking the Chrome Network tool, I see data being sent like this:

name: John Doe
email: [email protected]
phone: 9876543210
company: Acme Inc

The form posts to a URL like:

https://forms.hsforms.com/submissions/v3/public/submit/formsnext/multipart/...

It’s not an AJAX call, so I’m stumped on how to track it. Any ideas on capturing this submission data locally? I want to store just the count, not the actual form data. Thanks for any help!

2

I’ve faced a similar challenge with HubSpot forms on a client’s site. Here’s what worked for us:

We used a JavaScript event listener to capture the form submission event. Since HubSpot forms trigger a ‘submitted’ event when successfully submitted, you can hook into that.

Add this code to your site:

window.addEventListener('message', function(event) {
    if (event.data.type === 'hsFormSubmission') {
        // Increment your local counter here
        let submissionCount = localStorage.getItem('formSubmissions') || 0;
        submissionCount++;
        localStorage.setItem('formSubmissions', submissionCount);
    }
});

This listens for HubSpot’s submission event and increments a counter in localStorage. You can then retrieve this count anywhere on your site.

Remember to test thoroughly, as HubSpot occasionally updates their form scripts. Hope this helps!

3

Having worked with HubSpot forms extensively, I can suggest another approach that’s been reliable for me. Consider using the onFormSubmit callback function provided by HubSpot’s form API. It’s a cleaner method that doesn’t rely on DOM mutations or message events.

Here’s a snippet you can adapt:

window._hsq = window._hsq || [];
window._hsq.push(['addFormSubmitListener', (form) => {
    let count = parseInt(localStorage.getItem('formSubmissions') || '0');
    localStorage.setItem('formSubmissions', count + 1);
}]);

This method hooks directly into HubSpot’s form submission process, ensuring you catch all submissions regardless of how the form is rendered or submitted. It’s also more resistant to potential changes in HubSpot’s implementation. Just make sure to place this code after HubSpot’s form script is loaded.

4

hey danielr, i ran into this too. try using MutationObserver to watch for changes in the form element. when it detects a successful submission, increment a counter in localStorage. something like:

window.addEventListener(‘load’, () => {
const observer = new MutationObserver(() => {
if (form.classList.contains(‘submitted’)) {
localStorage.setItem(‘count’, +localStorage.getItem(‘count’) + 1);
}
});
observer.observe(form, {attributes: true});
});

5

As someone who’s dealt with HubSpot forms quite a bit, I’ve found that using Google Tag Manager (GTM) can be a game-changer for tracking form submissions. It’s a flexible solution that doesn’t require modifying your site’s code directly.

Here’s what you can do:

Set up a custom HTML tag in GTM that listens for the form submission event. Then, use GTM’s built-in variables to increment a counter in localStorage. You can also set up a trigger that fires on successful form submissions.

This approach is particularly useful because it separates your tracking logic from your site’s codebase, making it easier to manage and update. Plus, if HubSpot changes their form implementation, you can usually adjust your tracking in GTM without touching your website code.

Just remember to test thoroughly across different browsers and devices to ensure consistent tracking.

6

yo danielr, i got a trick for ya. try using the hubspot forms api. it’s got a callback function that fires after submission. somethin like this:

hbspt.forms.create({
onFormSubmit: function() {
let count = localStorage.getItem(‘submissions’) || 0;
localStorage.setItem(‘submissions’, ++count);
}
});

this’ll keep track locally without messin with the actual form data. good luck!