topic Re: How can I collect current page URL in form? in APIs & Integrations

How can I collect current page URL in form?

Shadministrator — Mon, 16 Oct 2017 20:58:12 GMT

Hello,

Does anyone know if there’s a way to put a hidden text field in a Hubspot form and have it collect the current page url when the user submits the form? (through javascript or otherwise?)

I feel like this is pretty basic but I’m not sure where to start. Thanks.

Re: How can I collect current page URL in form?

Derek_Gervais — Tue, 17 Oct 2017 15:27:31 GMT

Hi @Shadministrator,

The current page (or location) of the browser is stored in Window.location (see below). You could populate a hidden form field with this value by targeting the input using jQuery and setting the value to window.location. The form embed document below has some examples of this.

Re: How can I collect current page URL in form?

Shadministrator — Tue, 17 Oct 2017 15:47:30 GMT

Ok, thanks for that Derek.

So I did see this in the documentation - https://developers.hubspot.com/docs/methods/forms/advanced_form_options

I’m thinking I could just do:

$('input[name="website"]').val(Window.location.href).change();

The question is where do I put this code? I tried putting it in the embed code but it didn’t work. I feel like I’m missing something (or a few things). Any other advice on this greatly appreciated. Thanks.

Re: How can I collect current page URL in form?

Derek_Gervais — Tue, 17 Oct 2017 17:13:40 GMT

Hi @Shadministrator,

You could pass an onFormReady callback function in the form embed code, and execute that within that callback. That should populate the hidden form field once the form has been rendered in the DOM. It’d look something like this:

hbspt.forms.create({
  portalId: '{your Hub ID}',
  formId: '{your form GUID}',
  onFormReady: function($form) {
    $('input[name="website"]').val(Window.location.href).change();
  }
});

Re: How can I collect current page URL in form?

Shadministrator — Tue, 17 Oct 2017 20:05:32 GMT

AWESOME!

That works great, thanks Derek. Only thing I changed was the “Window.location.href” --> “window.location.href” (made the “W” lowercase).

Hope this helps someone else.

Re: How can I collect current page URL in form?

AnandV — Tue, 24 Oct 2017 21:51:24 GMT

Thanks for the help guys. I cant seem to get my code to work with these steps above. Here is what I got:
hbspt.forms.create({
portalId: ‘XXXXXX’,
formId: 'XXXX’
onFormReady: function($form) {
$(‘input[name=“sample_pn_url”]’).val(Window.location.href).change();
}
});

sample_pn_url is the hidden field I am trying to write the URL to.

Any help would be great!

Re: How can I collect current page URL in form?

Shadministrator — Tue, 24 Oct 2017 22:15:02 GMT

Hi Venkie,

Make sure the “w” in “Window.location.href” is lowercase (should be “window.location.href”).

Also, make sure “sample_pn_url” is the field id not the field name.

Re: How can I collect current page URL in form?

AnandV — Tue, 24 Oct 2017 22:33:46 GMT

@Shadministrator

Thanks for the quick reply and fixes. I changed the W to w, and I am still getting no luck. I checked that the sample_pn_url is the id. Any other suggestions?

hbspt.forms.create({
portalId: ‘XXX’,
formId: ‘XXXXXX’,
onFormReady: function($form) {
$(‘input[name=“sample_pn_url”]’).val(window.location.href).change();
}
});

Re: How can I collect current page URL in form?

das_kreitz — Tue, 12 Dec 2017 21:50:49 GMT

Venkie, did you get this to work? Often it’s the input name that spoils the party. To clarify, it’s not the “id”, it’s the “name”. Good idea to view the form source code and see if the name matches with your script.

Here’s an example of a working configuration:

hbspt.forms.create({
portalId: ‘xxxxxxxx’,
formId: ‘3f986685-13c9-4689-bfb6-3cb109b3169c’,
css: ’ ',
onFormReady: function($form){$(‘input[name=“last_conversion_location”]’).val(window.location.href).change();}
});

Of course I created a new conversion property “last conversion location”, which generated the field “name” last_conversion_location then added the hidden field on the form.

Let me know if you still need help.

Re: How can I collect current page URL in form?

patrickhummel — Mon, 05 Feb 2018 16:55:43 GMT

Hi!

I am not reaching the goal

<!--[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: 'XXXXXX',
  formId: '72b74198-7eda-41db-b85e-26720205d7a1',
  onFormReady: function($form){$(‘input[name=“website”]’).val().change(window.location.href);}
});
});
</script>

What is wrong with my code`?

Re: How can I collect current page URL in form?

Shadministrator — Mon, 05 Feb 2018 17:28:20 GMT

Hi Patrick,

Make sure you have your own form id and the input name is correct (is the
contact property you are trying to populate named “website” ?)

Re: How can I collect current page URL in form?

patrickhummel — Mon, 05 Feb 2018 18:04:22 GMT

label and internal name is “website” and the form must be the right, otherwise the integration with HTML would not show this form or?

http://www.sorba.ch/kontakt-test
p: testSorba

Re: How can I collect current page URL in form?

das_kreitz — Thu, 08 Feb 2018 19:45:10 GMT

Gonna go out on a limb here and suggest renaming your custom URL tracking field something besides “website”. HS already has a field for Website URL with an internal name of “website”. Try using the code I pasted above and rename your field to “last_conversion_location”.

Re: How can I collect current page URL in form?

patrickhummel — Fri, 09 Feb 2018 07:35:40 GMT

Thank you all for the attempts to help.
HubSpot had a cache problem. My custom html box was not even loaded, so referring to the variable never would be possible. Deleting the whole module and setting up a new html box helped.

Perhaps others need this information too Later, the code from das_kreitz works perfectly.

Re: How can I collect current page URL in form?

modxb29 — Mon, 16 Apr 2018 10:15:43 GMT

Thanks @Derek_Gervais - but window.location.href doesnt work within a cross domain iframe.

Re: How can I collect current page URL in form?

marioSWP — Thu, 16 Aug 2018 14:24:01 GMT

Is there a reason why the form_page_url token would work on one domain and not a secondary domain?

Using the code in this post helps collect the current url a form is submitted on in my primary domain. However, using the same exact setup, on a secondary domain it doesn't.

I even created a second property to track separately from the the token on the primary domain and its not functioning either.

My code:

<!-- [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: "XXX",
        	formId: "XXXXXX",
                css: '',
          onFormReady: function($form) {
         $('input[name="sample_pn_url"]').val(window.location.href).change();
          }
        });
        </script>

Browser console does through this error:
TypeError: $ is not a function
at onFormReady (www.not_a_real_site.com./:313)
at Object.runCustomerCallbackFunction (v2.js:9)
at t.componentDidMount (v2.js:11)
at r.notifyAll (v2.js:1)
at r.close (v2.js:3)
at r.closeAll (v2.js:4)
at r.perform (v2.js:4)
at f (v2.js:3)
at r.perform (v2.js:4)
at Object.batchedUpdates (v2.js:2)

Re: How can I collect current page URL in form?

Derek_Gervais — Tue, 21 Aug 2018 20:23:37 GMT

Hi @marioSWP,

That error means that the jQuery function call (i.e. $()) is undefined. I'd expect to see that error if you didn't have jQuery on your secondary domain.

Re: How can I collect current page URL in form?

lukecoburn — Fri, 08 Mar 2019 23:59:16 GMT

I am having a problem populating hidden fields when they are hidden, but not when they are normal. I am using javascript to point at the form field like this:

jQuery('input[id="last_known_conversion_page-customnumbersthatidontknowifishouldsharepublicly"]').val(window.location.href).change();

This javascript works to populate the field when the form field is added in HubSpot's form editor normally, but it does not work when I check the box to "Make this field hidden" in the HubSpot form editor.

My clunky workaround is to add the field in HubSpot's form editor as a normal (not hidden) field, but then add display:none that field's class to my CSS file:

.hs_last_known_conversion_page {
display: none;
}

Doing this does work, and the field populates and passes through. But it's a hack that I will certainly forget by next year and then won't be able to figure why fields that aren't marked as hidden in HubSpot are being hidden.

Is there a better way to be doing this in 2019? I'm not sure if some of the information on this page hasn't changed in the past couple of years.

Re: How can I collect current page URL in form?

TFD — Tue, 01 Jun 2021 06:43:54 GMT

Hi, I'm traing to do the same thing but for me doesn't work,

any ideas please? I would like to know the window.location on ticket

onFormReady: function($form) {
$('input[name="actualurl"]').val(window.location.href).change();
}
});
</script>