Passing URL data through a form submission

[Jon_Sasala]

Hello All,

We are looking to pass information in a URL parameter through when a form is submitted.

When a rep sends traffic to our website it ads ?rep_first=jon&rep_last=smith to every page viewed. This allows us to display a reps contact information rather than the main company info.

What we are trying to solve is if a contact submits a form we want that contact to get assigned to the rep. Unfortunately this is not easily solved with workflows because ‘submitted a form on a page containing’ is not an option. So I look to the developer community for a solution.

I was hoping this could be solved by adding some code to the form embed form like below. Is this an option?

<!--[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: '608340',
    formId: '6080fcbb-28bc-4dd0-935a-e3bf9267d17b',
    rep: '{{request.query_dict.rep_first}} {{request.query_dict.rep_last}}'
  });
</script>

I also tried adding a hidden field in the form for Rep with {{request.query_dict.rep_first}} {{request.query_dict.rep_last}} as the default value but that is not picked up as HubL when the form is submitted.

Any suggestions?

[theller5567]

@Jon_Sasala What was the excepted answer for your question?

We have a similar situation and curious as to which route you went with for your solution.

[JShroyer]

I just did something similar, but just for tracking the source URL for our team to know where the form was submitted from. I added a new hidden field named url_query_string and added this script to the page:

<script>
setTimeout(function(){
// Modify hidden field to pass through the query string into Hubspot
var addQueryToField = document.querySelector(".hs_url_query_string input");
addQueryToField.setAttribute("value", window.location.search);
}, 600);
</script>

[AdoilsonCruz]

Hello, how are you?

I have a WordPress website built with Elementor, and I tried applying your idea, but unfortunately, it didn’t work. I added the necessary settings to the page and configured the hidden field in my form, but I think I might be doing something wrong.

Could you help me understand what might be missing in the process?

[Jon_Sasala]

This generally sounds more complicated than it needs to be. If what you are trying to achieve is sending a link to the right PDF based on which landing page someone filled out a form on, you do not need to be passing any hidden data or setting any contact property for the contact.

You could just have a workflow that states If contact filled out White Paper Form on Example A Landing page, send them Example A Email. Example A Email has a link to the correct white paper.

No need to have a workflow set a contact property with the proper link.

As far as the debate between one form or multiple forms, I think the benefits in either direction are minimal. Using multiple forms probably gives you faster reporting on interest in specific white papers, and allows you to ask for different information depending on the content. One form limits how many forms you have to manage if you choose to universally change all forms.

I would lean towards multiple forms.

[Jon_Sasala]

@arun_sasi, According to @Daniel_Bertschi’s suggestion, all you would need to do is have a contact property called “filename” that is hidden on the form. When the form is submitted “asd33” should come through as the value for that field. You can then have a workflow to do what you describe.

If White Paper Download Form is filled out and Filename is asd33, send them ASD33 Email.

Total you will have one form and 10 workflows.

The way most HS users would solve this out to the box though is simply having 10 different forms.

[arun_sasi]

Hi,

According to your opinion which one is better
One form 10 workflows or 10 different forms~

[arun_sasi]

Hi,

I have the same scenario, but slightly different.
Currently, i have 10 pdf files open to the public. For lead creation, I am planning to integrate a gating system using Hubspot form and workflow.

For that, i have created a Workflow and a Form in HubSpot

I tried to pass a value to the form from the download button via URL like this
http://www.landingpageurl.com/page-title-here?filename=asd33

After that in workflow I have created a criteria .
Contact has filled out White Paper Download.
IF/then branch
The contact property White Paper Code is equal to asd33.
Set contact property to http://xyz.com/pdf.pdf

And send an email to the user with the downlink

Now my issue is how can i handle this 10 pdf files download in a single form. I have 10 separate landing page

[Jon_Sasala]

Wow. That is pretty simple. Thanks.

We did end up using the Javascript but this is great to know for future use. Thanks all.

[DanielBertschi]

Hey @JonSasala
Sorry a bit late to the party here. Another approach which would likely be easier as it doesn’t require any code at all would be the following:

1. create custom properties in HubSpot for both URL parameters
2. Add those custom properties to the form as hidden fields
3. If the naming conventions for the URL parameters and the names of the hidden fields are exactly the same, the system will automatically grab the info from the URL param and pass it into the system through the hidden field upon form submission.
4. You could then use workflows such as:
   Starting condition:

• Contact Property > rep_first > is equal to > “jon”
• AND Contact Property > rep_last > is equal to > "smith"
  Action:
• Set Contact Property > HubSpot Owner > Jon Smith.

This article from our knowledge explains this approach in a bit more detail.

[3PETE]

@Daniel_Bertschi Thanks for helping out with a cool work around!

[3PETE]

You can write a less verbose option using a regex to filter out the data if you are used to working with regex patterns.

[3PETE]

@JonSasala Instead of using HubL try using Javascript for grabbing the data from the URL.

Here is an example on how to do that in JavaScript

function parseURLParams(url) {
    var queryStart = url.indexOf("?") + 1,
        queryEnd   = url.indexOf("#") + 1 || url.length + 1,
        query = url.slice(queryStart, queryEnd - 1),
        pairs = query.replace(/\+/g, " ").split("&"),
        parms = {}, i, n, v, nv;

    if (query === url || query === "") return;

    for (i = 0; i < pairs.length; i++) {
        nv = pairs[i].split("=", 2);
        n = decodeURIComponent(nv[0]);
        v = decodeURIComponent(nv[1]);

        if (!parms.hasOwnProperty(n)) parms[n] = [];
        parms[n].push(nv.length === 2 ? v : null);
    }
    return parms;
}

Use as follows:

var urlString = "http://www.foo.com/bar?a=a+a&b%20b=b&c=1&c=2&d#hash";
    urlParams = parseURLParams(urlString);

which returns a an object like this:

{
  "a"  : ["a a"],     /* param values are always returned as arrays */
  "b b": ["b"],       /* param names can have special chars as well */
  "c"  : ["1", "2"]   /* an URL param can occur multiple times!     */
  "d"  : [null]       /* parameters without values are set to null  */ 
} 

So

parseURLParams("www.mints.com?name=something")
gives

{name: ["something"]}