# Google Tag Manager - Push Form Data to dataLayer

**URL:** <https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [November 14, 2021, 8:59pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935 "2021-11-14T20:59:16Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![EMartin51](https://avatars.discourse-cdn.com/v4/letter/e/50afbb/32.png) [@EMartin51](https://community.hubspot.com/u/EMartin51)\
**Post date:** [November 14, 2021, 8:59pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/1 "2021-11-14T20:59:16Z")

</div>

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?

```lia-code-sample
<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>

```

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [November 15, 2021, 7:29am UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/2 "2021-11-15T07:29:40Z")

</div>

Hi @EMartin51 ,

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

```lia-code-sample
<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.

---

<div class="post-metadata">

**Author:** ![EMartin51](https://avatars.discourse-cdn.com/v4/letter/e/50afbb/32.png) [@EMartin51](https://community.hubspot.com/u/EMartin51)\
**Post date:** [November 15, 2021, 11:16am UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/3 "2021-11-15T11:16:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ondukwe](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ondukwe/32/29572_2.png) [@ondukwe](https://community.hubspot.com/u/ondukwe)\
**Post date:** [November 23, 2021, 9:59pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/4 "2021-11-23T21:59:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ELobato2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/elobato2/32/62359_2.png) [@ELobato2](https://community.hubspot.com/u/ELobato2)\
**Post date:** [December 24, 2021, 1:16am UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/5 "2021-12-24T01:16:19Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ANeita](https://avatars.discourse-cdn.com/v4/letter/a/f475e1/32.png) [@ANeita](https://community.hubspot.com/u/ANeita)\
**Post date:** [October 24, 2022, 4:45pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/6 "2022-10-24T16:45:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dvllgs](https://avatars.discourse-cdn.com/v4/letter/d/439d5e/32.png) [@dvllgs](https://community.hubspot.com/u/dvllgs)\
**Post date:** [May 29, 2024, 4:19am UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/7 "2024-05-29T04:19:39Z")

</div>

You can access the email address like this :

shout out to [sambasci.com](http://sambasci.com) for figuring this out

```lia-code-sample
<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>

```

---

<div class="post-metadata">

**Author:** ![ELobato2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/elobato2/32/62359_2.png) [@ELobato2](https://community.hubspot.com/u/ELobato2)\
**Post date:** [December 22, 2021, 7:32am UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/8 "2021-12-22T07:32:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![NiklasBuschner](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/niklasbuschner/32/72409_2.png) [@NiklasBuschner](https://community.hubspot.com/u/NiklasBuschner)\
**Post date:** [January 24, 2023, 10:51am UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/9 "2023-01-24T10:51:26Z")

</div>

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

```lia-code-sample
<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**.

 ![Bildschirmfoto 2023-01-24 um 11.49.24.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/8/8848a0b67c65b2b8e387cf5f4feda4f6ce81b8d0.png)

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

```lia-code-sample
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.

 ![Bildschirmfoto 2023-01-24 um 11.49.51.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/2/4/24e30c4db2630ef82a2be4670f848a7757ce0acd.png)

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

---

<div class="post-metadata">

**Author:** ![mateostabio](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@mateostabio](https://community.hubspot.com/u/mateostabio)\
**Post date:** [February 1, 2023, 11:54pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/10 "2023-02-01T23:54:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![NiklasBuschner](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/niklasbuschner/32/72409_2.png) [@NiklasBuschner](https://community.hubspot.com/u/NiklasBuschner)\
**Post date:** [February 2, 2023, 12:34pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/11 "2023-02-02T12:34:12Z")

</div>

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.

 ![Bildschirmfoto 2023-02-02 um 13.26.53.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/4/e441da76c5f3e3a73b6a113bcf220135c423eab3.png)

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

 ![Bildschirmfoto 2023-02-02 um 13.30.28.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/e/0/e07f794a8efc6baabf8ffb52d43a1011029e2712.png)

Finally, you just have to [activate enhanced conversion in the Google Ads conversion configuration](https://support.google.com/google-ads/answer/12785317?hl=en&visit_id=638109368656321507-1507535723&rd=1).

I hope this helps.

---

<div class="post-metadata">

**Author:** ![MRosa1](https://avatars.discourse-cdn.com/v4/letter/m/eb9ed0/32.png) [@MRosa1](https://community.hubspot.com/u/MRosa1)\
**Post date:** [June 10, 2025, 8:07pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/12 "2025-06-10T20:07:27Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![DianaGomez](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dianagomez/32/48035_2.png) [@DianaGomez](https://community.hubspot.com/u/DianaGomez)\
**Post date:** [June 11, 2025, 3:44pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/13 "2025-06-11T15:44:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Haccount](https://avatars.discourse-cdn.com/v4/letter/h/c6cbf5/32.png) [@Haccount](https://community.hubspot.com/u/Haccount)\
**Post date:** [February 21, 2023, 10:42pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/14 "2023-02-21T22:42:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![SebKoppjes](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sebkoppjes/32/33328_2.png) [@SebKoppjes](https://community.hubspot.com/u/SebKoppjes)\
**Post date:** [March 16, 2023, 3:07pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/15 "2023-03-16T15:07:54Z")

</div>

This should be the accepted solution in my opinion.

The one Teun mentions isn’t working for me.

---

<div class="post-metadata">

**Author:** ![Teun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/teun/32/28739_2.png) [@Teun](https://community.hubspot.com/u/Teun)\
**Post date:** [March 16, 2023, 3:17pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/16 "2023-03-16T15:17:20Z")

</div>

This is indeed a great solution.

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

---

<div class="post-metadata">

**Author:** ![NiklasBuschner](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/niklasbuschner/32/72409_2.png) [@NiklasBuschner](https://community.hubspot.com/u/NiklasBuschner)\
**Post date:** [March 16, 2023, 4:01pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/17 "2023-03-16T16:01:12Z")

</div>

Thanks @SebKoppjes highly appreciated!

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [March 16, 2023, 5:52pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/18 "2023-03-16T17:52:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SebKoppjes](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/sebkoppjes/32/33328_2.png) [@SebKoppjes](https://community.hubspot.com/u/SebKoppjes)\
**Post date:** [March 17, 2023, 8:37am UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/19 "2023-03-17T08:37:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![HSSW](https://avatars.discourse-cdn.com/v4/letter/h/90ced4/32.png) [@HSSW](https://community.hubspot.com/u/HSSW)\
**Post date:** [April 28, 2023, 4:41pm UTC](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935/20 "2023-04-28T16:41:59Z")

</div>

edit: works for me; thanks!

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

[Next page](https://community.hubspot.com/t/google-tag-manager-push-form-data-to-datalayer/46935.md?page=2)