fill hidden field with new multistep from

Marketing & Content Hub Lead Capture Tools
1

how can i fill hidden field in new multistep from with javascript i had tried this

<!--[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="//js.hsforms.net/forms/v2.js" defer></script>
<script>
var change_me = "123";

window.addEventListener('message', event => {
 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 document.getElementById("hs-form-iframe-0").contentDocument.querySelector('input[name="change_me"]').value = change_me;
 }
});
</script>

but it is not working
new form is using this embeding
<script src=“https://js.hsforms.net/forms/embed/XXX65354.js” defer></script>
<div class=“hs-form-frame” data-region=“na1” data-form-id=“54e33587-38e9-4b35-88c3-b4b1ab2fc117” data-portal-id=“21065354”></div>

2

Hi @TJovevski,
Thank you for posting to the Community!
I understand that you are trying to add a hidden field to a multi-step form with Javascript.
Tagging in some of our Subject Experts to see if they have any ideas on this one -- Hi @Indra @stefen and @Syeda_Fatima Do any of you all have any experience with adding a hidden field to a multi-step form? If so, can you offer any tips to @TJovevski?
Cassie, Community Manager

3

Hey @TJovevski It depends how you want the form to behave:

Fixed value: if you always want the same value, set it as a Default value on the hidden field directly in HubSpot.

Dynamic value: if you want the value to come from the URL (so it changes per visitor), you can use a URL structure like this: https://www.yourwebpage.com/contact/?example_field=12345

In this case, example_field would be the internal name of the hidden field in your HubSpot form, and 12345 is the value that would automatically populate when someone submits the form.

4

Hi @TJovevski,

The new form works a bit different. The following code should work in your case:

 // --- Edit these 3 values ---
 const FORM_ID = '54e33587-38e9-4b35-88c3-b4b1ab2fc117'; // your formId
 const FIELDNAME = '0-1/amplitude_device_id'; // exact field "name" from your render
 const FIELDVAL = 'New value'; // the value you want to set
 // (optional alt key if you also have a plain contact property)
 const ALT_FIELDNAME = 'amplitude_device_id';

 // Ensure we set the field when the form is fully ready
 window.addEventListener('hs-form-event:on-ready', (event) => {
 try {
 const { formId } = event.detail || {};
 if (formId !== FORM_ID) return;

 // Get the concrete form instance (Forms V4 API)
 const form = window.HubSpotFormsV4 && HubSpotFormsV4.getFormFromEvent(event);
 if (!form) return;

 // Write to HubSpot's internal state (survives rerenders & submits)
 form.setFieldValue(FIELDNAME, FIELDVAL);
 if (ALT_FIELDNAME) form.setFieldValue(ALT_FIELDNAME, FIELDVAL);

 // Optional: verify what HubSpot will submit
 form.getFormFieldValues().then(vals => {
 // console.log(vals); // uncomment for debugging
 });
 } catch (e) {
 // console.warn(e); // uncomment for debugging
 }
 });

 // Optional: if your form is multi-step, also re-apply on step navigation
 window.addEventListener('hs-form-event:on-interaction:navigate', (event) => {
 const { formId } = event.detail || {};
 if (formId !== FORM_ID) return;
 const form = window.HubSpotFormsV4 && HubSpotFormsV4.getFormFromEvent(event);
 if (!form) return;
 form.setFieldValue(FIELDNAME, FIELDVAL);
 if (ALT_FIELDNAME) form.setFieldValue(ALT_FIELDNAME, FIELDVAL);
 });

I also want to mention you the portal ID from your sample code is still visible. I suggest to hide/remove it.