Hello all,
Currently, I have a form that has a hidden field called product type. I want to be able to use the same form across multiple pages with the only difference being which checkbox is filled in the hidden field.
The only way I have achieved this affect is using prefilled urls but this don’t seem to work with embedded forms. I have also tried to use javascript to change the field after the form has loaded, but this also doesn’t seem to work on my Wordpress site.
If there is another way to achieve the affect of categorizing or marking which page a response came from, I would also be open to using that method.
@Vincent_Zhang - by “prefilled URLs” do you mean the use of query parameters to the page URL where the form is embedded?
Steve
Yes. I have used the shared link with query parameters in Zoho forms to achieve this effect, but with how hubspot embeds their forms, I have not been able to find a way to replicate the effect.
Hmm - using the query strings has always been pretty effective for me, but could be reagrded as “fragile.”
No matter, I think modifying your embed code to add a little more in the way of JS could be effective.
You will presumably want to change the hidden form value based on the page URL where the form is embedded. You should do this within an extended onFormReady() function within the hbspt.forms.create call in the embed code. You will also need the form ID string and the internal property name of the hidden value that you want to set.
hbspt.forms.create({
region: "na1",
portalId: "{{hub_id}}",
formId: "{{form_id }}",
onFormReady: function($form) {
console.log("Autocomplete ready\n",$form);
let field = document.getElementById(field_id);
let this_url = window.location.href;
if (field == null)
console.log("Selected id not found in document(check raw form option): ", field_id);
else {
// REST OF YOUR SCRIPT HERE
}
});
There’s some logic required to set the desired field value from the URL, but I’ll leave that to you!
As a hidden field, getting the field ID to set the is a little less obvious than you might like - in this case we try and derive it from the HS form field label convention. But once you have the field and have checked that it really is an INPUT, you can assign the new value and “bubble” it up.
// defaults to setting a Contact property here with keyword ID for webinar (sibling of label on a hidden field)
var field_id = "label-" + "{{ internal_property_name }}" + "-" + "{{ form_id }}";
let label = document.getElementById(field_id);
let field = label.nextSibling.nextSibling.firstChild;
console.log("Found element type: ", field.nodeName);
if (field == null || field.nodeName != "INPUT" )
console.log("Selected INPUT id not found in document(check raw form option): ", field_id);
else {
console.log("Element: ", field);
field.value = "{{ hidden_field_value }}";
// register the value update
field.dispatchEvent(new Event('input', { bubbles: true }));
console.log("Value added: ", field.value);
}
Best of luck!
Steve