How can I access to a form data after submission?

[Egoi]

I want to push a datalayer with the form data. To do so I am trying to access form data after submission as explained in this solution but is not working:

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

for some reason data object does not have form data:

Thanks in advice!

[LMeert · Accepted solution]

Hi @Egoi,

It looks like the event which you can get the values on is not 'onFormSubmitted' but 'onFormSubmit', see capture below :

You see how two messages get sent with the postMessage() function from the iframe ?

Both are tied to an event, and the code you mention tries to get the value of the email key, but it's not present in the 'onFormSubmitted' object.

Change it to 'onFormSubmit' to get the values submitted with the form.

Then you have two solutions :
- if you want to make one code apply to all your forms, whatever their composition may be, you can loop on the data array and return only the email.
- if it's just for one form, you can make that simpler by locating the index of the email value and change your code by :

<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 field has an idex of 3 in the data object, but you will have to update that to your use case.

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

Ludwig

[Teun]

Great solution @LMeert , as usual 😁

[LMeert]

Thank you both @Egoi, @Teun 🙏
Glad this could help !

[Egoi]

Thank you so much, it works nicely!

[Teun]

Hi @Egoi ,

This solution does not expect any form data but instead retrieves the data from the form fields themselves.

Did you try the solution?