Get HubSpot form field values using Google Tag Manager (GTM)

[RBRESK]

Im trying to obrtain a value from embedded HubSpot form on the website using GTM at the moment of form submission.

Im using this basic script as form submit listener

<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
  window.dataLayer.push({
    'event': 'hubspot-form-success',
    'hs-form-guid': event.data.id,
});
}});
</script>

I've seen several instances of this same question but none of the solutions work for me - or maybe those solutions are outdated. 

I have tried the following:

https://community.hubspot.com/t5/APIs-Integrations/Google-Tag-Manager-Push-Form-Data-to-dataLayer/m-...

https://community.hubspot.com/t5/APIs-Integrations/How-can-I-access-to-a-form-data-after-submission/...

https://community.hubspot.com/t5/CMS-Development/Field-Value-on-Form-Submit/m-p/462974

Please help.

[imtiazprotik]

You can follow this article to Track HubSpot Form Submissions with Google Tag Manager and Google Analytics

https://fizzypop.nz/digital-marketing-insights/track-hubspot-form-submissions-with-google-tag-manage...

[yasiooy]

Hi all,

I've found this thread while looking for a solution for our client - maybe you'll be able to help.

We have a form with a custom dropdown property with 3 options. What we would like to do is to have an Analytics Event that would fire each time the form is submitted and would save the dropdown value in Event Label.

In the past we managed to successfully set up a custom event in GTM that would fire each time a form is submitted and the Label value was the submission page. Do you have a clue what we could use as a parameter in Label so that it would pass the chosen dropdown field value? Would something like {{contact.internalname}} work? (assuming internalname is the internal name of the said field)

[PathfinderM]

Hey yasiooy,

If im understanding you message and images correctly your looking to grab form data and pass it through GTM into GA.

What you need is a piece of javascript running in GTM to grab the form fields on submission retain that data until confirmation is fired and then pass that data into GTM on confirmation so you can push it into GA as a custom dimension (in your case an Event Label).

It isnt as simple as picking the hs form field internal value - from my understanding.
I have created some custom javascript to grab form fields to pass it into GA before, feel free to DM me.

[JMeroney1]

HI everyone, I know I'm late to the party, however if you want to use GTM, I finally found a video where everything works.   https://youtu.be/xd-4G0VSb2Y

[PathfinderM]

This video only talks about pushing events to GA and pushing the Hubspot form ID.
Not quite the same as collecting the data entry entered into your form fields.
The trick (which took me ages to figure out) is to build the listener on the submit event to collect the field data and then you can pass it to the submitted event.
Our use case was that we wanted to see if we could push the data into Google Ads to do enhanced conversions as i work for Pathfinder Marketing, a digital marketing agency.
I have had a developer build a listener that does collect this data so it can be picked up by GTM and then used however you need to.
I dont know about how the moderation works on these forums as i dont typically post, so i dont know if i can add my email or say msg me or what, but if your interested - msg me and if im allowed i will add my email for those who are interested 🙂
Hope that lil trick above helps all the people who are trying to code it out!

[Jaycee_Lewis]

Hi, @RBRESK Thanks for reaching out. I think GTM gives many folks nightmares 😬

Hey @LMeert @miljkovicmisa @coldrickjack @JBeatty  do you have any experience or troubleshooting next steps you can share with @RBRESK?

Thank you

[LMeert]

Hi @RBRESK,

As I explained in a reply to another thread (that you also listed), if this is the script you're using :

<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
  window.dataLayer.push({
    'event': 'hubspot-form-success',
    'hs-form-guid': event.data.id,
});
}});
</script>

That won't work because the content of the submitted form is available within the data array only on the "onFormSubmit" event (and not onFormsubmitted).

Which means your script should include the condition event.data.eventName === 'onFormSubmit' like below :

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
      window.dataLayer.push({
        'event': 'hubspot-form-success',
        'hs-form-guid': event.data.id,
        'email' : event.data[3].value;
      });
    }
  });
</script>

In my case, the email was the fourth element of the form so the fourth element of the data array, hence the event.data[3].value, but you will have to adapt based on your own form.

If this still doesn't work, please do send the url of the page you're trying to track so I can have a look and give you a more precise answer.

Best,

Ludwig

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

[RBRESK]

The moment I add this line, that moment script stops working. This form listener script is deployed through GTM.

'email' : event.data[3].value

[LMeert · Accepted solution]

Hi @RBRESK,

I've tried using the listenner via the dev console on google chrome and it does work for me :

I've used the listenner to push on the dataLayer the whole event data array instead of just the email.

I think the safest way for you to fix this is to get the whole data array and then have a dataLayer variable within GTM that will get the email value :

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
      window.dataLayer.push({
        'event': 'hubspot-form-success',
        'event-data' : event.data;
      });
    }
  });
</script>

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

Ps: sorry for the multiple tests submitted with my email,  I was testing things out.
Please delete every form submission from any email @mi4.fr

Best,

Ludwig

[jlanier]

Hi Ludwig - I am trying your solution to capture email and phone from form submissions. The data layer is picking up all the values from the submission, but I'm struggling to identify the right structure to pull the data layer variable name into a GTM variable. 

The event-data looks like this:
event-data: {
id: "50d7a2f4-35af-43de-9477-2f9508307a07",
type: "hsFormCallback",
eventName: "onFormSubmit",
data: [
{name: "firstname", value: "test"},
{name: "lastname", value: "test"},
{name: "email", value: "email@email.com"},
{name: "mobilephone", value: "6155551212"}

Using event-data.data.email doesn't work to capture the value. Do you have any suggestions?

[Haccount]

Hi @LMeert ,

Thanks for sharing mate, your solution really helped me to overcome a very similar challenge.

If you don't mind, could you link me to some documentation on how to use the listenner via dev console for HubSpot forms?

Thanks again.

[RBRESK]

I need field [3] from the form which isn't email but value from dropdown. Could that be the problem?

[RBRESK]

Thank you for the effort Ludwig,

unfortunately your solution proposal doesn't sove the problem. I get success event, I get guid data, but doesn't send field data or that field element value from the array (in my case its also [3]).

This is the URL. 
https://bit.ly/3pr6hHg

[LMeert]

Hi @RBRESK,

You should be able to get the value from every field on the form.

I've visited your page and executed the listenner script I mentionned previously and this is the dataLayer event received :

You can see the event-data contains every field, including iznos_kredita_u__, which had a value of 6000 in my case.

Also, I've just realized I made a typo in the script I included, there's an extra ";" after event.data, so here's the corrected and working script :

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
      window.dataLayer.push({
        'event': 'hubspot-form-success',
        'event-data' : event.data
      });
    }
  });
</script>

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

Best,

Ludwig

[PathfinderM]

Hi Ludwig,

This article is very helpful however i think the concern is that you are stipulating array 2 by writing event.data[3].value with the presumption that this array will always be the same field, but if you have many forms it is often not.

What could we put in the listener or probably more aptly in a piece of custom javascript variable or a datalayer variable or a javascript variable (In GTM) that says when the name = email, pull value?

I saw this: $('input[name="email"]').val() in another thread but it didnt seem to work in the listener or as a varaible.

That would be far more helpful and scalable.

Thanks 🙂