Google Tag Manager - Push Form Data to dataLayer

[EMartin51]

Hi,

I’m trying to push a form’s email value into the dataLayer once a form has been submitted; I’ve called the variable “hs-form-email” in the code below. I’ve been trying lots of different ways, and if I literally just use ‘event.data’, I can see the names and values in the variable, but I can’t find a way to only extract the email value - could someone help?

<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,
 'hs-form-email' : event.data.email.value
 });
 }
 });
</script>

[Teun]

Hi @EMartin51 ,

There is probably a better way to retrieve the value from the data object, but this should work:

<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,
 'hs-form-email' : $('input[name="email"]').val()
 });
 }
 });
</script>

Not sure why, but I’ve only been able to manipulate and retrieve form data with jQuery, but I love to see a Vanilla JS solution that actually works.

[EMartin51]

Hi @Teun - perfect, this works like a charm, thank you very much!

[ondukwe]

This code was very helpful for what I want to do in GTM. Thank you!

[ELobato2]

Hi Teun, would yo help me how to add this? I got some problem because when i add that code that you posted here. No more hubspot-success-form fires. Its an Custom HTML Tag.

[ANeita]

Can you please help provide an example of this but for the hubspot meetings form submission?

[dvllgs]

You can access the email address like this :

shout out to sambasci.com for figuring this out

<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,
 'hs-form-email': event.data.data.submissionValues.email
 });
 }
 });
</script>

[ELobato2]

How did you add it? Because i tried too like @Teun say but Listener don’t appear when i submit a form. If i try without email data, it works but adding that additional code breaks the HTML for me.

[NiklasBuschner]

You can also dynamically access email input from the data layer with this step by step process.

Key to this process is, that you are not reliant on values being extracted from the DOM and you do not need to know at with position the email field is located since the code retrieves it dynamically.

1. HTML Tag that triggers on all pages

<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-data': event.data,
 'hs-id': event.data.id
 });
 }
 });
</script>

2. Set up data layer variable called HubSpot Data where the name of the data layer variable is exactly hs-data.

3. Set up custom javascript variable – I call it HubSpot Mail (Forms) – with the following code:

function() {
 var email;
 for (var i = 0; i < {{HubSpot Data}}.data.length; i++) {
 if({{HubSpot Data}}.data[i].name === 'email') {
 email = {{HubSpot Data}}.data[i].value;
 }
 }
 return email;
}

4. Use the variable HubSpot Mail (Forms) at your disposal, for example for enhanced conversions in Google Ads.

5. Set up data layer variable called HubSpot ID where the name of the data layer variable is exactly hs-id. You can now also use the ID of the form to send it to Google Analytics 4 as a custom parameter to identify the forms later on.

If you need any clarification about the setup, please reach out anytime!

[mateostabio]

This is exactly what I needed. I am getting errors when trying to preview GTM. How did you link these variables to Google Ads?

[NiklasBuschner]

You create a new variable from the User-provided Data type and select your HubSpot Mail (Forms) variable for email and optionally a phone variable for phone.

Then you add this variable to your Google Ads conversion tag from the option “Include user-provided data from your website”.

Finally, you just have to activate enhanced conversion in the Google Ads conversion configuration.

I hope this helps.

[MRosa1]

Hello, I applied this process to track form submissions in google ads, but the google ads tag preview shows that form_submit gets hits sent with the user provided data with the enhanced conversion and hashed email. But the next event is the conversion and the conversion comes with the ec_mode - a (automatic) instead of manual, So it doesn’t receive the hashed email: em - tv.1.

Do you know how to fix this?

Thanks!

[DianaGomez]

Hi @MRosa1,

Thanks for reaching out to the Community!

Given that the original post is quite old (two years!), it would be best to create a fresh post. To ensure the community can offer the best support, please include ample detail and context, along with any relevant screenshots or code snippet.

Thanks!
Diana

[Haccount]

Hey @NiklasBuschner,

Thanks a lot for sharing this solution.

Worked perfectly on my end by just doing small tweaks on the CSJ to retrieve other fields from the form.

I’m glad I came across your post.

Cheers.

[SebKoppjes]

This should be the accepted solution in my opinion.

The one Teun mentions isn’t working for me.

[Teun]

This is indeed a great solution.

I made a quick video about sending Tagmanager events from HubSpot: https://youtu.be/s3Ie-tKn0hM
Hope this helps someone.

[NiklasBuschner]

Thanks @SebKoppjes highly appreciated!

[Jaycee_Lewis]

Hey, @SebKoppjes Please consider clicking the Accept Solution button for @NiklasBuschner’s post. I’m sure he’d appreciate it. And it will add it to the top of this post.
Thank you! — Jaycee

[SebKoppjes]

Isnt it the opening post that can do that only? I dont see the button?

[HSSW]

edit: works for me; thanks!

the solution was referring to the ‘onFormSubmit’ and not the ‘onFormSubmitted’ event!