topic Re: jQuery to get page URL in hidden field in APIs & Integrations

jQuery to get page URL in hidden field

Aaaaandrei — Tue, 04 Dec 2018 10:24:08 GMT

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.

Re: jQuery to get page URL in hidden field

cbarley — Tue, 04 Dec 2018 21:51:30 GMT

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?

Re: jQuery to get page URL in hidden field

Aaaaandrei — Wed, 05 Dec 2018 09:47:44 GMT

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.

Re: jQuery to get page URL in hidden field

cbarley — Wed, 05 Dec 2018 15:54:00 GMT

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.

Re: jQuery to get page URL in hidden field

Aaaaandrei — Tue, 11 Dec 2018 11:18:53 GMT

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

Re: jQuery to get page URL in hidden field

cbarley — Tue, 11 Dec 2018 17:31:17 GMT

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?

Re: jQuery to get page URL in hidden field

Aaaaandrei — Wed, 12 Dec 2018 09:25:32 GMT

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.

Re: jQuery to get page URL in hidden field

cbarley — Wed, 12 Dec 2018 14:07:49 GMT

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>

Re: jQuery to get page URL in hidden field

texasisheaven — Sat, 04 Jul 2020 16:14:53 GMT

CBARLEY - can you help me write a script to capture a Hubspot /Wordpress form page URL? I'm trying to capture the unique URL used to enter the info and then save that in the HubSpot.

Re: jQuery to get page URL in hidden field

JoelEckman — Sat, 23 Jul 2022 19:02:20 GMT

I had no luck will all above suggestions. I am using WordPress with the HubSpot plugin and finally got the following to pass the current URL to a hidden form field successfully. Yay me!

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
region: "na1",
portalId: "MYPORTALID",
formId: "MYFORMID",
css: '',
onFormReady: function($form) {
$form.find('input[name="MYFIELD_NAME"]').val(window.location.href).change();
}
});
</script>

Re: jQuery to get page URL in hidden field

JoelEckman — Thu, 03 Nov 2022 12:54:30 GMT

I had to use this again and felt I should elaborate.

Edit your hubspot form to include a hidden variable with an id such as page_url
Replace the hubspot form shortcode in your wordpress site with the script above
Change MYPORTALID to your hubspot portal id
Change MYFORMID to your hubspot form (its the long string in the url when editing the form)
Change the MYFIELD_NAME to your hidden hubspot form property field id
Submit the new form from your website
Go to your zap in zapier
Make sure you are using the new connection method to hubspot and not the old email system
Walk through the setup for the zap and refresh form data. You should see your recent submission. Choose that data for testing.
You may need to update your parsed email fields and you should now have the URL as a property variable
Sip Coffee and move on to next task... you are a hero.

Why would anyone need to do this? Your client is too cheap to pay for the full version of HubSpot and they are too lazy to form a new email when they receive an inquiry and just want to hit reply on their notification.

Re: jQuery to get page URL in hidden field

MKhanna4 — Tue, 05 Mar 2024 13:34:09 GMT

I am not getting the desired result with the same code @cbarley . However, I am testing the code on an external landing page created in Marketo right now. But this form will be hosted on multiple pages on WordPress in the future. So, I want the functionality to work.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta class="mktoString" mktoName="Variable 1" id="var1" default="This is a variable"> <title></title> <style> body {background:#fff;} </style> </head> <body> ${var1} <div class="mktoText" id="exampleText" mktoName="Example Text Area"> Hubspot form to test JS Code </div> <div>  <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script> <script> hbspt.forms.create({ region: "na1", portalId: "MYPORTALID", formId: "MYFORMID", onFormReady: function($form) { $form.find('input[name="content_download_page_url"]').val(window.location.href).change(); } }); </script> </div> </body> </html>