How to track form submission events in Javascript?

[JZee]

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

[sanketwebinopol]

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.

[lukebussey]

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

[Dadams · Accepted solution]

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

[JM10]

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

JM

[JZee]

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