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
Guide | Platinum Partner
Guide | 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

8 Replies 8
YNovozhilova
Member

How can I access to a form data after submission?

SOLVE

This will work if you don't know the order of email field:

 

<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
var emailField = event.data.data.find(function (field) {
return field.name === "email";
});
var submittedEmail = emailField.value;
window.dataLayer.push({
'event': 'hubspot-form-submit',
'hs-form-guid': event.data.id,
'hs-form-email': submittedEmail
});
}
});
</script>

 

0 Upvotes
LMeert
Solution
Guide | Platinum Partner
Guide | 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 !

klarinettekompo
Member

How can I access to a form data after submission?

SOLVE

Hey @LMeert –

 

Rather embarassing novice question here...but how did you get the event data to show up in console like that...it'd be very useful for me to see that. My orgnization is beginning to ask for some development based on the responses of the forms, which I can do, but the HubSpot documentation recommends not using onFormSubmit for redirects and to use onFormSubmitted, but input field values are not available in the onFormSubmitted function. This topic seems to answer some of my questions but I'd love to be able to see the event data the way you showed in console.

 

Thank You!

0 Upvotes
psiamenau
Member

How can I access to a form data after submission?

SOLVE

Hi, Ludwig
i cant understand how to get success form submit evant and also how to get email after submit
i write this, but i think it`s not a good practice

window.addEventListener('message', event => {
if (event.data['meetingBookSucceeded'] &&
event.data['meetingBookSucceeded'] === true) {
var email = event.data['meetingsPayload']['bookingResponse']['postResponse']['contact']['email'];

if (!email) {
return;
}
alert(email)
}
});    
0 Upvotes
Teun
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How can I access to a form data after submission?

SOLVE

Great solution @LMeert , as usual 😁



Learn more about HubSpot by following me on LinkedIn or YouTube

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


LMeert
Guide | Platinum Partner
Guide | 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
Recognized Expert | Diamond Partner
Recognized Expert | 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?



Learn more about HubSpot by following me on LinkedIn or YouTube

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


0 Upvotes