APIs & Integrations

vPhilipp
Contributor

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

SOLVE

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

0 Upvotes
2 Accepted solutions
piersg
Solution
Key Advisor

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

SOLVE

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.

View solution in original post

piersg
Solution
Key Advisor

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

SOLVE

@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.

View solution in original post

19 Replies 19
piersg
Key Advisor

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

SOLVE

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

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

 

0 Upvotes
RiccardoPisani
Top Contributor

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

SOLVE

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?

0 Upvotes
vPhilipp
Contributor

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

SOLVE

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!

0 Upvotes
piersg
Solution
Key Advisor

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

SOLVE

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.

mimidwest
Participant

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

SOLVE

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. 

0 Upvotes
henrywangnl
Participant

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

SOLVE

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
Key Advisor

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

SOLVE

Sorry, yes that's correct. Updated

Teun
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

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

SOLVE

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:

 



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.


piersg
Key Advisor

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

SOLVE

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
Participant

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

SOLVE

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?

0 Upvotes
piersg
Solution
Key Advisor

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

SOLVE

@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
Participant

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

SOLVE

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? 

0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

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

SOLVE

Amazing! Thank you, @piersg 🙌

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes
APak3
Participant

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

SOLVE

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

0 Upvotes
piersg
Key Advisor

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

SOLVE

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

0 Upvotes
APak3
Participant

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

SOLVE

@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 !

0 Upvotes
piersg
Key Advisor

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

SOLVE

@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 );
	}
});
0 Upvotes
piersg
Key Advisor

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

SOLVE

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.

0 Upvotes
dennisedson
HubSpot Product Team
HubSpot Product Team

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

SOLVE

@piersg what do you think?

0 Upvotes