APIs & Integrations

Egoi
Participant | Partner
Participant | Partner

How can I access to a form data after submission?

SOLVE

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:

 

Captura de pantalla 2022-05-21 a las 15.25.35.png

 

Thanks in advice!

 

0 Upvotes
1 Accepted solution
LMeert
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

How can I access to a form data after submission?

SOLVE

Hi @Egoi,

 

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

LMeert_0-1653287262482.png

 

 

 

 

 

 

 

 

 

 

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

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

View solution in original post

5 Replies 5
LMeert
Solution
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

How can I access to a form data after submission?

SOLVE

Hi @Egoi,

 

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

LMeert_0-1653287262482.png

 

 

 

 

 

 

 

 

 

 

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

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

Teun
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

How can I access to a form data after submission?

SOLVE

Great solution @LMeert , as usual 😁



Did my answer solve your issue? Help the community by marking it as the solution.
LMeert
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

How can I access to a form data after submission?

SOLVE

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

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

0 Upvotes
Egoi
Participant | Partner
Participant | Partner

How can I access to a form data after submission?

SOLVE

Thank you so much, it works nicely!

Teun
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

How can I access to a form data after submission?

SOLVE

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?



Did my answer solve your issue? Help the community by marking it as the solution.
0 Upvotes