forms that capture urls from embeded page its on

[pixelmorph]

Good morning - I have a form that's embedded in a wordpress site - ideally, i'd like that form to also pass back to. my salespeople the URL of the form  ( to identify the product ) the enquiry is about - in a normal html form I can do this with a hidden form field.  -
can  I do it with a hubspot form? and what is the best method? 

[karstenkoehler · Accepted solution]

Hi @pixelmorph,

You can pass values into contact properties with hidden HubSpot fields, yes. You can find a step-by-step instruction here: https://knowledge.hubspot.com/forms/pass-contact-property-values-with-hidden-form-fields

You have several options.

Option 1: You create a custom property, more specifically single-line text field. This would then be available as a hidden field for your forms. You could then set a default value for this hidden field: the URL of the page you're using it on.

Option 2: You create a custom property for your products, for example a multiple checkboxes field called Product interest, also to be used as a hidden field. This would maybe serve the same purpose – if the goal is to let your sales reps know which product a contact is interested in. (Heads-up about multiple checkboxes fields: A new form submission will replace existing values, not append them.)

Option 3: Have a look at the Recent conversion field, this is automatically populated by HubSpot when a form is submitted. It's formatted as the name of the page the form was submitted on, followed by a colon, then the name of the submitted form. You can find it listed here.

Hope this helps!

[JGreen36]

For all those that need a more robust answer....with a solid example that works:

We have a form that has Contact Table fields (basics: name, email, phone) plus two separate  Custom Object Table fields to automatically tie a single submission as relationships (clever, simple, and reliable).

Next, wanting to auto-populate the webpage title (using wordpress) to these two custom object fields' input values that are also hidden. This became difficult, cursing ensued, but we have conquered it! The key was finding the "name" of the input fields. Simplistic example code didn't 'cut it'.

The above mentioned code was instrumental in crafting this solution (as well as kudos to @derekcavaliero on Solved: HubSpot Community - Embedded Form: Populating form fields - HubSpot Community), but the documentation does NOT ever explain how to fulfill this successful code:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
 hbspt.forms.create({
  region: "na1",
  portalId: "12345678",
  formId: "a341x83a-147e-4fd1-8axc-9367e2b9a179",
  onFormReady: function($form) {
   var v = document.title;
   // strip out the site title addon so I just get the page title
   var v = v.replace(' - titleofmywordpresssitethatidonotwantadded', '');
   // find then OVERRIDE the values of the two custom object fields
   $form.find('input[name="2-9710866/title"]').val(v).change();
   $form.find('input[name="2-9451010/matter_title"]').val(v).change();
  }
 });
</script>

It took 'inspecting' the form on the rendered webpage to discover the true name of the custom object input fields. Seems to be a concatenation of the properties 'objectTypeId' + '/' + 'name'. 

Overall, it took coffee, cursing, and rage-filled persistence. But now I am calm and happy. Now this one form can dynamically satisfy our need for 45 (only?!) different individual forms to be created. PHEW! 🤤

Happy coding y'all and hope this helps round out HubSpot's documentation. Please add this example or one similar for our "complex users" 😎

Always remember to mind your Ps and Qs.....and commas, semi-colons, and curly braces. Rock on coders! 🤓

[LSol]

I'm really not clear about this one - I have been using Gravity forms and I can do this successfully, as explained here, just by adding a hidden field in the form with the value {referer} - PLEASE ADVISE!

I have added a hidden field with value {referer} - but not working.

thanks.

GravityForms 

[Ben_M]

The only thing you appear to be missing from your post is copying the value to a property in Hubspot. If you create a property in Hubspot and add that to the field as a hidden field.  Then your code would look like:

var lastSubmissionURL = window.location.href;
onFormReady: function($form) {
$('input[name="customProperty"]').val(lastSubmissionURL).change();	} 

[pixelmorph]

 that seems to  break the javascript if dont have it out on its own ... will it still work if I do this ? 
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
portalId: "5973560",
formId: "d8329f35-3716-46d5-934d-6d775793afc3",
formInstanceId: "open-Cabler"
});
</script>
<script>var lastSubmissionURL = window.location.href;
onFormReady: function($form) {
$('input[name="pageitcamefrom"]').val(lastSubmissionURL).change(); }
</script>
seems inelegent is there a better way to. combine it in the origial creation of the form ..?  

[pixelmorph]

ok taling to myself as I'm not getting replys - seems that the form already knows and sends the data I want (the page it came from)  in an email so thats grand
 
I just need to. know how to add that data to a waiting list  OR  even better  use that data  to poplulate several lists (there seems to be a logic option for this on the lists but its locked down to hubspot pages..)

heres the data in hubspot  so its passed there too so all I need is to either show that on the  list  or  make a list  
se above - any page -   I tried pasting in my url... no dice but ultimately this would be a way forward  - if i can make. waiting lists for courses dependent on the location of the page there were submitted from that would help...

[DEbert]

Hi, have you found a solution for this? It is exactly what I am looking into right now. 

Best,
Dennis

[Ben_M · Accepted solution]

Alternatively you can just update the embed code for your pages to populate the hidden fields as suggested.

https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options

By using that custom embed code you can just use Javascript to get the URL of the page ( window.location.href ) or you can get the page title ( document.title ) if you have human readable pages that would make sense to a rep.

This ability to push data to the Hubspot form embed is very useful as one of the main uses for marketing that I used most often was also seeing the page that referred the submission which is not something that Hubspot provides in a default property.

[pixelmorph]

I like this option. but the documentation is a bit light for me to navigate without a clear example ..would it be something like this ?

but then how do I pass that back to hubspot as usefull  data in a ticket or a list...<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
portalId: "5973560",
formId: "d8329f35-3716-46d5-934d-6d775793afc3"
onFormSubmit: function($form) {
function getURL()
alert("The URL of this page is: " + window.location.href);
}

});
</script>

[karstenkoehler · Accepted solution]

Hi @pixelmorph,

You can pass values into contact properties with hidden HubSpot fields, yes. You can find a step-by-step instruction here: https://knowledge.hubspot.com/forms/pass-contact-property-values-with-hidden-form-fields

You have several options.

Option 1: You create a custom property, more specifically single-line text field. This would then be available as a hidden field for your forms. You could then set a default value for this hidden field: the URL of the page you're using it on.

Option 2: You create a custom property for your products, for example a multiple checkboxes field called Product interest, also to be used as a hidden field. This would maybe serve the same purpose – if the goal is to let your sales reps know which product a contact is interested in. (Heads-up about multiple checkboxes fields: A new form submission will replace existing values, not append them.)

Option 3: Have a look at the Recent conversion field, this is automatically populated by HubSpot when a form is submitted. It's formatted as the name of the page the form was submitted on, followed by a colon, then the name of the submitted form. You can find it listed here.

Hope this helps!

[pixelmorph]

yeah I can put the field as hidden but to dynamically set it to grab the page title ..(I'll use the the same form on different pages or i'll end up with a gazillion forms) doenst seem to be an option.