APIs & Integrations

Jon_Sasala
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Passing URL data through a form submission

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?




Hypha HubSpot Development

Jon Sasala (He / Him)
President • Hypha HubSpot Development

Phone: 516-284-3333
Email: JSasala@HyphaDev.io
HyphaDev.io




LinkedIn Icon

Facebook Icon

Instagram Icon



P.S. The HubSpot Partner Directory accepts reviews. Please leave us a positive review and help us hit our goal of 200.



10 Replies 10
JShroyer
Member

Passing URL data through a form submission

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>

 

Jon_Sasala
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Passing URL data through a form submission

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.




Hypha HubSpot Development

Jon Sasala (He / Him)
President • Hypha HubSpot Development

Phone: 516-284-3333
Email: JSasala@HyphaDev.io
HyphaDev.io




LinkedIn Icon

Facebook Icon

Instagram Icon



P.S. The HubSpot Partner Directory accepts reviews. Please leave us a positive review and help us hit our goal of 200.



Jon_Sasala
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Passing URL data through a form submission

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




Hypha HubSpot Development

Jon Sasala (He / Him)
President • Hypha HubSpot Development

Phone: 516-284-3333
Email: JSasala@HyphaDev.io
HyphaDev.io




LinkedIn Icon

Facebook Icon

Instagram Icon



P.S. The HubSpot Partner Directory accepts reviews. Please leave us a positive review and help us hit our goal of 200.



arun_sasi
Member

Passing URL data through a form submission

Hi,

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

0 Upvotes
arun_sasi
Member

Passing URL data through a form submission

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

0 Upvotes
Jon_Sasala
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Passing URL data through a form submission

Wow. That is pretty simple. Thanks.

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




Hypha HubSpot Development

Jon Sasala (He / Him)
President • Hypha HubSpot Development

Phone: 516-284-3333
Email: JSasala@HyphaDev.io
HyphaDev.io




LinkedIn Icon

Facebook Icon

Instagram Icon



P.S. The HubSpot Partner Directory accepts reviews. Please leave us a positive review and help us hit our goal of 200.



0 Upvotes
DanielBertschi
HubSpot Employee
HubSpot Employee

Passing URL data through a form submission

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
HubSpot Employee
HubSpot Employee

Passing URL data through a form submission

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

3PETE
HubSpot Employee
HubSpot Employee

Passing URL data through a form submission

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

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Passing URL data through a form submission

@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"]}
0 Upvotes