jQuery to get page URL in hidden field



My goal is to store the URL of the page the form is embedded on inside a contact property.

So I built a form with a hidden field.

Embedded the form on the site so I can pick the field class(es) - hidden fields don't have an ID in HubSpot.

Wrote a bit of jQuery and tested it (on https://jsfiddle.net/boilerplate/jquery)

See code:
var getURL = window.location.href;

I was then advised to add this before the closing body tag on the website.
I haven't yet added this as I would have to go through our dev team to do that and I just wanted to make sure that the build is correct.

The main question I have is - will the hidden field value then be stored inside the property value of the contacts who filled the form in?

Has anyone tried this before, is there anything to look out for?

Thanks for taking the time to go through this.


Hi @aaaaandrei, happy to help! Are you just asking to see if your code should work on a page? What is the goal of this script?

Can you please also send a link to the page you're working on so I can try to test some things out in the Console?

Dynamic Button URL based on custom Property?

Thanks for the reply @Connor_Barley!

I tried the code on https://jsfiddle.net/ so I know it works in that it prints the page URL inside a field. (see attachment).

I'm more curious to confirm if that's all I need to store that value inside a contact property, and if there is a special place the code should go on the page (like above the HubSpot code for example).

So the goal would be to store the page URL inside a contact property for automation purposes. The form is present on multiple location pages and I would want to create a workflows using the URL field as an enrollment criteria.

Here's the URL for the page. The form pops up when you click on the green button: https://ww1.qstopmba.com/events/qs-world-mba-tour/europe/st-petersburg



Hi @aaaaandrei, that should work except with our form embed code you need to tack on the .change() method. I made a quick example on my own page and was able to get the current location to populate the submission in a custom property called URL that I had created. Here's what my code looks like:

	var getURL = window.location;

Your code should work, but again, it would be good to test this out on a live page -- I can't get to your URL that you linked above, as it says it's insecure for me.


Hi @Connor_Barley

So I ended up using the code recommended to us by our HS onboarding manager (the one mentioned in the description above) and I can confirm it fires but it doesn't pull the same data it did in my tests for some reason. If anything, it pulls much more data than expected. This is the value it added to the hidden field for my submission test:

{"rumScriptExecuteTime":6775.399999998626,"rumServiceResponseTime":7075.4999999917345,"rumFormRenderTime":1.1999999987892807,"rumTotalRenderTime":10517.299999992247,"rumTotalRequestTime":297.2999999910826,"lang":"en","renderRawHtml":"true","pageUrl":"https://ww1.qstopmba.com/events/qs-world-mba-tour/europe/st-petersburg","pageTitle":"World MBA Tour St. Petersburg TopMBA.com","source":"FormsNext-static-3.139","timestamp":1544523873001,"userAgent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36","originalEmbedContext":{"portalId":"4668725","formId":"815284a8-4698-4b26-ad7b-26d27720147f","target":"#hbspt-form-1544523872855-1233246860","inlineMessage":true,"hutk":"dab4327b13fa0dc2ded837c4282adf98"},"formValidity":{"country":{"valid":true}},"formTarget":"#hbspt-form-1544523872855-1233246860","correlationId":"704c3575-7d60-4b7c-8c8c-42afeada880a","hutk":"dab4327b13fa0dc2ded837c4282adf98"}

When I checked HubSpot, the field was empty though. Do you know why HubSpot wouldn't be adding this data onto a contact property if it has been picked up in a (hidden) field?

Wn the body as opposed to the header or footer, not sure if this would have anything to do with it but I thought I'd mention it.

Do you know why the code pulls more than just the URL? Equally important, why is this not present inside the contact property, once the form has been submitted?



Hi @aaaaandrei, not sure why that would happen, as I was able to get the current URL to populate with the code I used from my example when I placed it on my site. You shouldn't get all of that data unless there's another process, like a forms api call happening. I cannot see your screenshots, can you please send a link to the live site where you implemented this code?


Hi @Connor_Barley

This is the link: https://ww1.qstopmba.com/events/qs-world-mba-tour/europe/st-petersburg

It's a test website and as you pointed out, the browser may mark it as insecure. You should be able to access if you click advanced and then proceed anyway (in chrome).

Let me know if you're able to access the page.


Hey @aaaaandrei, thanks for the link — taking a look at your site, it looks like your code is not within a script tag and is just being rendered as a string.

You'll need to put that code within <script></script> tags, or place your JS within the onFormSubmit method within the form like so:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
	portalId: "4668725",
	formId: "815284a8-4698-4b26-ad7b-26d27720147f",
    onFormSubmit: JS HERE


Thanks @Connor_Barley, we initially added the script via GTM and it was in the incorrect location,
It's in the head tag now below the jquery library.

It still pulls more data than it should. Is is possible to check if this is interfering with another script in inspect mode in Chrome?


Hi @aaaaandrei, there not be anything interfering with this script. It's a pretty simple block of code and should not be conflicting with anything. I'm seeing that your code does not include the .change() method as we require per these docs: https://developers.hubspot.com/docs/methods/forms/advanced_form_options, and you're not placing the code in a document.ready function or the onFormSubmit method, meaning that since your code is placed above the form embed, you're selecting items that do not yet exist in the DOM. I'd recommend placing the code I gave previously below your form embed code (I would not recommend GTM in this instance), or within an onFormSubmit callback function.