jQuery to get page URL in hidden field


#1

Hi,

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;
('.hs_registration_backlink.hs-registration_backlink.hs-fieldtype-text.field.hs-form-field').val(('.hs_registration_backlink.hs-registration_backlink.hs-fieldtype-text.field.hs-form-field').val()+getURL);

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.


#3

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?
#4

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

Cheers.


#5

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:

$(document).ready(function(){
	var getURL = window.location;
  	$("input[name='url']").val(getURL).change();
});

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.


#6

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?

Thanks!!


#7

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?


#8

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.


#9

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>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	portalId: "4668725",
	formId: "815284a8-4698-4b26-ad7b-26d27720147f",
    onFormSubmit: JS HERE
});
</script>