Set a Property Based off of the page the form was Submitted

[tylerstouder]

We are a a home builder who might have over 30 communties at one time.   Rather then create a monsterous workflow, I would like to be able to have a script run that sets our "Interested Community" property based off of the page the form was submitted.

Example of pages:

https://lp.yourarborhome.com/neighborhood/cranbrook/

https://yourarborhome.com/neighborhood/cranbrook/

If someone submits the form on this page, it their Interseted Community should be "Cranbrook"

[lscanlan]

Hi @tylerstouder,

Could you use a hidden form field (https://knowledge.hubspot.com/articles/kcs_article/forms/pass-contact-property-values-with-hidden-fo...) for this? Given what your URL looks like at https://lp.yourarborhome.com/neighborhood/cranbrook, you could split the page URL in JavaScript, grab the last item from that array, and then set that as the value in your hidden form field. We have an article here: https://developers.hubspot.com/manipulating-forms-with-jquery which describes how to manipulate form fields. So using that you could pass your value into your hidden form field.

Would that work do you think? Let me know if you have any questions about it.

[tylerstouder]

Hi Leland -

I used the following Scripts below.  However, they don't work when I remove the css: line.  With the css line, it makes the formating of my forms look broke.

Tyler

This is what I have in place here https://lp.yourarborhome.com/neighborhood/webster-crossing:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "5350244",
formId: "bfe44dc0-94da-46dd-8a7e-ec688912818b",
css:"",
onFormReady: function($form) {
String.prototype.capitalize = function() {
return this.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
};
var url = $(location).attr('href').split('neighborhood/').pop();
var neighborhood = url.replace(new RegExp('-', 'g')," ").replace('/', '');
var community = neighborhood.capitalize();
$('input[name="community"]').val(community).change();
}
})
</script>

This is what I have in place here https://yourarborhome.com/neighborhood/cherry-tree-walk/:

<!--[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="https://js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: "5350244",
formId: "d17134b8-f5b6-4ae5-b10a-966b8e892df8",
onFormReady: function($form) {
String.prototype.capitalize = function() {
return this.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); });
};
var url = $(location).attr('href').split('neighborhood/').pop();
var neighborhood = url.replace(new RegExp('-', 'g')," ").replace('/', '');
var community = neighborhood.capitalize();
$('input[name="community"]').val(community).change();
},
css:""
});
</script>

[lscanlan · Accepted solution]

Hey @tylerstouder,

So I think what's happening here is that when you include the css option in your embed code, it's creating what we refer to as a "raw HTML form". In other words, the form renders as just HTML on your page as opposed to within an iframe. And it looks like your code works when the form is a raw HTML form but not when it's iframed in, because your callback function doesn't have access to the frame that the form is in. So you can grab the document's URL and split it, but you can't set your value inside the hidden form input in the iframe.

So I think you'll need to use a raw HTML form for this in order to get the community name into your form input, and then you'll need to use your own custom CSS to get everything styled correctly. There's an option to set the form as raw HTML in the Style & preview tab of the form editor, which you can see here: https://knowledge.hubspot.com/articles/kcs_article/forms/how-do-i-style-my-embedded-form.

And when you say the formatting looks broken, does it sound like the above? Where the default CSS is just getting removed? Or is there something else at play do you think? In testing on my end, it just looked like the default CSS was getting removed.