How to pass e-mail address as URL parameter from an HubSpot Form

[vPhilipp]

Hey there,

we're currently trying something possible stupid, but we don't know another way around it. Maybe someone can help me here.

We want to achieve the Following:

- fill out a form with your name and e-mail address

- after hitting "send" you will get transferred to another page where there is another form to fill in

- the E-Mail address field should then be populated from the previous form

- The first form is an HubSpot form, the second is not.

We already have the possibility to get the E-Mail from the URL. But we need the function, to pass the e-mail address to the URL as a Parameter itself. 

We're working with WordPress and Elementor.

Is there a way to achieve this with HubSpot forms?

@Kevin-C maybe you know some way around for this?

Thanks in Advance.

Regards

Philipp

[piersg · Accepted solution]

If you're embedding the form on your page I would do it like this.

<!-- this is the standard form embed code --> 
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "[PORTAL ID]",
    formId: "[FORM ID]"
  });
  // add custom script after it
  let array = [];
  window.addEventListener('message', event => {
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
	  const fields = ['firstname', 'lastname', 'email', 'phone', 'hs_language'];
	  event.data.data.forEach(x => {
	    let found = fields.find(y => y === x.name);
	    if (found) {
	      let object = {
	        name: found,
	        value: x.value
	      };
	     array.push(object);
	    }
	  });
	}
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
	  let firstname = array.find(x => x.name === 'firstname').value;
	  let lastname = array.find(x => x.name === 'lastname').value;
	  let email = array.find(x => x.name === 'email').value;
	  let phone = array.find(x => x.name === 'phone').value;
	  let lang = array.find(x => x.name === 'hs_language').value;
	  window.location = "[URL TO REDIRECT TO HERE]?firstName=" + encodeURIComponent( firstname ) +"&lastName=" + encodeURIComponent( lastname ) +"&email=" + encodeURIComponent( email ) + "&phone=" + encodeURIComponent( phone ) + "&language=" + encodeURIComponent( lang );
	}
  });
</script>

Edit on 28/10/22 : changed the above code after it stopped working. Not clear why it stopped.

[piersg]

@RiccardoPisani just remove the encodeURIComponent method for email so it's 

..."&email=" + email + "...

[RiccardoPisani]

Thanks for sharing this - it is a great solution.  I am using this and it works. Is there any way to pass the email non-encoded? I need to grab that email into a Typeform and a%40 is added instead of the @ - 

do you have any workaround for this?

[vPhilipp]

Thanks for your Answer. Do you by any chance know, how to implement this in Wordpress (with Elementor)? Or does this script go into the HubSpot Form?

Thank you very much in Advance!

[piersg · Accepted solution]

If you're embedding the form on your page I would do it like this.

<!-- this is the standard form embed code --> 
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    portalId: "[PORTAL ID]",
    formId: "[FORM ID]"
  });
  // add custom script after it
  let array = [];
  window.addEventListener('message', event => {
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
	  const fields = ['firstname', 'lastname', 'email', 'phone', 'hs_language'];
	  event.data.data.forEach(x => {
	    let found = fields.find(y => y === x.name);
	    if (found) {
	      let object = {
	        name: found,
	        value: x.value
	      };
	     array.push(object);
	    }
	  });
	}
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
	  let firstname = array.find(x => x.name === 'firstname').value;
	  let lastname = array.find(x => x.name === 'lastname').value;
	  let email = array.find(x => x.name === 'email').value;
	  let phone = array.find(x => x.name === 'phone').value;
	  let lang = array.find(x => x.name === 'hs_language').value;
	  window.location = "[URL TO REDIRECT TO HERE]?firstName=" + encodeURIComponent( firstname ) +"&lastName=" + encodeURIComponent( lastname ) +"&email=" + encodeURIComponent( email ) + "&phone=" + encodeURIComponent( phone ) + "&language=" + encodeURIComponent( lang );
	}
  });
</script>

Edit on 28/10/22 : changed the above code after it stopped working. Not clear why it stopped.

[JMack2]

@piersg - is there a way to do this if you're using a Hubspot form on a Hubspot landing page? I can't figure out a way to edit the form embed code.

[mimidwest]

Hey piersg, similarly I'm trying to pass the email field data over to the next form which includes a hidden email field so that we can tie that form fill to a contact, without the need of cookies being used. Using the script you provided on 28/10/22, I'm not able to get it to work and wondering if there might be an updated script. Thanks for your help. 

[henrywangnl]

Hi @piersg, thanks very much for this. Just a little thing that you declared vars but didn't use it. I think you meant fields? 

[piersg]

Sorry, yes that's correct. Updated

[Teun]

Awesome solution @piersg 

      const context = document.querySelector('input[name="hs_context"]');
      const contextObject = JSON.parse(context.value);
      const redirectUrl = contextObject.redirectUrl; // Retrieve the redirectUrl from the form settings

If you want to include the Redirect URL from the form settings, you can use:

[piersg]

Hi @vPhilipp (thanks @dennisedson). Yes, I do this with Hubspot forms. Here's my method using Hubspot form global events (instead of customising the form embed with the onFormSubmit event). I've done it this way so the page is only redirected after the data is sent to Hubspot. I found with the onFormSubmit event sometimes the user is redirected before the data is sent.

var array = [];
window.addEventListener('message', event => {
  // in the onFormSubmit global form event, grab the data and push it to the above array
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
    let vars = ['firstname', 'lastname', 'email', 'phone', 'hs_language'];
    let len = vars.length;
    for (i = 0; i < len; i++) {
      for (j in event.data.data) {
        if (event.data.data[j]["name"] == vars[i]) {
          let object = {
            name: '',
            value: ''
          };
          object.name = vars[i];
          object.value = event.data.data[j]["value"];
          array.push(object);
        }
      }
    }
  }
  // after the form has submitted and data sent to Hubspot, get the data from the array and then redirect the page, adding the data to the URL
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
    var firstname = array[0].value
    var lastname = array[1].value
    var email = array[2].value
    var phone = array[3].value
    var lang = array[4].value
    {% set redirect = content_by_id(module.form.redirect_id) %}
    {% if module.form_info %} // boolean to decide whether to add form info to redirect URL or not
      window.location = `{{redirect.absolute_url}}?firstName=` + encodeURIComponent( firstname ) +"&lastName=" + encodeURIComponent( lastname ) +"&email=" + encodeURIComponent( email ) + "&phone=" + encodeURIComponent( phone ) + "&language=" + encodeURIComponent( lang );
    {% else %}
      window.location = `{{redirect.absolute_url}}`
    {% endif %}
  }
});

[APak3]

Hello,

First of all thank you for you great work because your script is working amazing for us.

However, since yesterday it doesn't seem to work properly on our side.

It seems that the first part of the script is not executing correctly anymore as objects are not pushed in the array.

Did you get the same problem?

[piersg · Accepted solution]

@APak3 thanks for replying, it turns out I was experiencing the same problem. I hadn't noticed and probably wouldn't have for a while had you not commented! So I appreciate it.

I've re-written it, and it now works:

let array = [];
window.addEventListener('message', event => {
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
	  const fields = ['firstname', 'lastname', 'email', 'phone', 'hs_language', 'country1'];
	  event.data.data.forEach(x => {
	    let found = fields.find(y => y === x.name);
	    if (found) {
	      let object = {
	        name: found,
	        value: x.value
	      };
	     array.push(object);
	    }
	  });
	}
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
	  let firstname = array.find(x => x.name === 'firstname').value;
	  let lastname = array.find(x => x.name === 'lastname').value;
	  let email = array.find(x => x.name === 'email').value;
	  let phone = array.find(x => x.name === 'phone').value;
	  let lang = array.find(x => x.name === 'hs_language').value;
	  let country = array.find(x => x.name === 'country1').value;
	  //... do things
	}
});

Edit @APak3 just made an optimisation actually. When I wrote it earlier today I was rushing to get it fixed, but I was thinking about it again. This is a better version, only one for loop.

[Jon-Eric1]

Hello

Working on this and it  passing everything through as a GUID ID = "&submissionGuid=e3759fee-d41e-4867-b4b2-89941a509220 - is that the intended outcome - was really hoping for a string. Is that possible? 

[Jaycee_Lewis]

Amazing! Thank you, @piersg 🙌

[APak3]

Yay, it works perfectly now 🙂 THANK YOU very much!

[piersg]

@APak3 Glad I could help. I've actually made a change to the above to optimise it a bit.

[APak3]

@piersg thank you for letting me know ! However I tried your new script and I am getting "undefined" as values in my URL parameters after redirection. 

Do you maybe know why ?

here is the code I used : 

<!-- this is the standard form embed code --> 
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXX",
    formId: "XXX",
    sfdcCampaignId: "XXX",
    version: "V2_PRERELEASE"
  });
  // add custom script after it
  var array = [];
  window.addEventListener('message', event => {
    // in the onFormSubmit global form event, grab the data and push it to the above array
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
  const vars = ['firstname', 'lastname', 'email', 'company', 'phone', 'message'];
  vars.forEach(x => {
    let object = {
      name: x,
      value: event.data.data[x]
    };
    array.push(object);
  });
}
    // after the form has submitted and data sent to Hubspot, get the data from the array and then redirect the page, adding the data to the URL
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      var firstname = array[0].value
      var lastname = array[1].value
      var email = array[2].value
      var company = array[3].value
      var phone = array[4].value
      window.location = "https://redirecturl.com?firstname=" + encodeURIComponent( firstname ) +"&lastname=" + encodeURIComponent( lastname ) +"&email=" + encodeURIComponent( email ) + "&phone=" + encodeURIComponent( phone ) + "&company=" + encodeURIComponent( company );
    }
  });
</script>

Thank you again !

[piersg]

@APak3 Updated above again, but here it is also:

let array = [];
window.addEventListener('message', event => {
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
	  const vars = ['firstname', 'lastname', 'email', 'phone', 'hs_language', 'country1'];
	  event.data.data.forEach(x => {
	    let found = fields.find(y => y === x.name);
	    if (found) {
	      let object = {
	        name: found,
	        value: x.value
	      };
	     array.push(object);
	    }
	  });
	}
	if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
	  let firstname = array.find(x => x.name === 'firstname').value;
	  let lastname = array.find(x => x.name === 'lastname').value;
	  let email = array.find(x => x.name === 'email').value;
	  let phone = array.find(x => x.name === 'phone').value;
	  let lang = array.find(x => x.name === 'hs_language').value;
	  let country = array.find(x => x.name === 'country1').value;
	  window.location = "https://redirecturl.com?firstname=" + encodeURIComponent( firstname ) +"&lastname=" + encodeURIComponent( lastname ) +"&email=" + encodeURIComponent( email ) + "&phone=" + encodeURIComponent( phone ) + "&company=" + encodeURIComponent( company );
	}
});

[piersg]

Hmm I'm not seeing that on my side. If that version isn't working for you but the previous one, I would just use the previous version. The gain in efficiency between the two isn't very much as we're dealing with short arrays.

[dennisedson]

@piersg what do you think?