We use cookies to make HubSpot's community a better place. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. To learn more, and to see a full list of cookies we use, check out our Cookie Policy (baked goods not included).
Sep 13, 2019 10:07 AM
Solved! Go to Solution.
Sep 16, 2019 5:01 PM
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.
Leland ScanlanHubSpot Developer Support |
Sep 13, 2019 5:23 PM
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.
Leland ScanlanHubSpot Developer Support |
Sep 16, 2019 1:46 PM
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>
Sep 16, 2019 5:01 PM
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.
Leland ScanlanHubSpot Developer Support |