You may have many reasons to use hidden fields on HubSpot’s embedded forms. In most cases, users want to pre-populate these fields with specific values before sending the form data to HubSpot. And while this should be a straightforward process, according to the documentation, sometimes the pre-populated hidden fields have their data cleared upon form submission. No one in the HubSpot community seems to know why this exactly happens, but there is a workaround.
Step 1: Unhide fields on HubSpot forms
While this may sound counterintuitive, you will first need to unhide the hidden fields in the HubSpot form. The reason for this is simple, but not fully clear. For whatever reason, when you hide the fields in the HubSpot interface, sometimes the pre-populated values get cleared on form submission, but this is not always the case — which makes this whole thing even more puzzling.
It appears that when you hide the field in the interface, HubSpot adds a type="hidden" on the input tag, instead of simply setting display: none. While I'm not sure this causes the problem, I have a suspicion that it might.
Step 2: Hide the fields on the front end
You will need to hide the fields on the front end instead. You can do it via a CSS file, but what I prefer to do is embed a jQuery code on the HubSpot embed script itself — that way you won’t have to worry about the iFrame not loading on time.
Locate the CSS class of the field you want to hide
First, you will need to find the CSS class of the field you want to hide. Once you’ve located it, you will need to use it in the code below.
Add jQuery or vanilla JS onto the HS embed script
Once you’ve modified the HubSpot embed form script as shown below, you won’t need to worry about random clearing of values upon form submission.
1<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
2<script>
3 hbspt.forms.create({
4 region: "na1",
5 portalId: "XXXXXX",
6 formId: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
7 // CUSTOM FUNCTIONS START
8 onFormReady: function($form) {
9 // Prepoulate hidden field with your values
10 $form.find('input[name="name-of-the-input-to-populate"]').val("value-that-you-want-to-add-to-the-field").change();
11 // Hide your field(s)
12 $form.find('.your-css-class-here').hide();
13 }
14 });
15</script>