topic Re: How to track form submission events in Javascript? in APIs & Integrations

How to track form submission events in Javascript?

JZee — Thu, 17 Nov 2016 21:53:53 GMT

Hi Everyone,

I’m trying to integrate a 3rd party analytics tool into my HubSpot landing pages. Specifically, I need to call the Heap Analytics Identify call when a user submits a form on our landing page, and I need to send some of that form data (the email field) to Heap as part of the call. Segment.io and many other tracking tools work in the exact same way.

I couldn’t find any instructions on how to do this in HubSpot’s documentation itself, but a quick Google search lead me to this blog post: https://robsobers.com/tracking-form-submission-events. The post explains my issue exactly, and the solution is exactly what I need! Unfortunately, however… it doesn’t work. The “hsvalidatedsubmit” event doesn’t seem to be getting fired.

Can someone tell me what event I should listen for, and/or how to integrate a callback for custom tracking on the client-side?

Thanks in advance!!!
Joe

Re: How to track form submission events in Javascript?

Dadams — Thu, 17 Nov 2016 22:46:48 GMT

Hi @JZee ,

The hsvalidatedsubmit event should still be firing, so you should still be listening for that event. My guess is that the .on() handler isn’t getting attached to the form, since forms load asynchronously after the page loads. You’d need to attach the handler to an element that will be a parent element of the form, that would already be on the page when your code runs, then filter by the actual form class. If you’re using a form module on a HubSpot page, adding this to the footer of the page should work:

$('.hs_cos_wrapper_type_form').on('hsvalidatedsubmit', '.hs-form', function (e) {
    //analytics code goes here
});

Re: How to track form submission events in Javascript?

JZee — Mon, 21 Nov 2016 20:48:25 GMT

Thanks @dadams!

That did the trick. For future visitors to this page, I had to make one small change to your example to get it to work for me. Here’s what I did:

$('body').on('hsvalidatedsubmit', '.hs-form', function (e) {
  var form = $(e.target);    
  var email = form.find('[name=email]').val();
  // analytics code goes here
});

Re: How to track form submission events in Javascript?

lukebussey — Fri, 24 Feb 2017 21:23:30 GMT

Is there a recommended way of doing this for leadin and collected forms?

Re: How to track form submission events in Javascript?

sanketwebinopol — Wed, 31 May 2017 15:14:50 GMT

From where we can put this code on landing page form? I want that submitted data in my server script so i can store in DB.

Re: How to track form submission events in Javascript?

JM10 — Fri, 13 Jan 2023 07:39:58 GMT

Hi,

Is there a way to do the same but without using jQuery event but Vanilla javascript?

We don't use jQuery in our site and would prefer not to use it if possible just for this.

Thank you in advance