Help with Hidden Fields in Forms

[Mark_Jackson]

Good afternoon. We’re trying to pass values via hidden fields on a Hubspot form that we created. We set up the form along with the hidden fields and we have the embed code (below), but we’re still unsure how to pass those values from the web page on which the form appears. The challenge is the values that need to be passed in the form fields are dynamic based on the URL of the web page. We thought we may be able to pass them in this script block:

< script>
hbspt.forms.create({
portalId: ‘3485016’,
formId: ‘53136bde-0f0e-470c-8563-116081228b22’,
css: ‘’
});
< /script>

….but it’s not clear if we can. Please advise?

[Derek_Gervais]

Hi @Mark_Jackson,

You can use jQuery to update the value of the hidden fields, like this:
$('input[name="firstname"]').val('Brian').change();
Just make sure you’re updating the value of the fields after the form has finished loading. You can make sure this happens by putting your code in the onFormReady callback:

developers.hubspot.com

How to customize the form embed code

This is a list of options that you can use if you just need to tweak a default hubspot form. If you need complete control over the styles and actions of your form, you will still want to use the Forms API.

[Szymon-dziewons]

Unfortunately that is not a case anymore, any idea how can I hide hidden field and dynamically update it before submition ?

Your documentation isnt valid because solution shown in Docs isnt working


Equivalent of Vanilla JS is

var el = document.querySelector('[name="imported_from"]');
el.value='New Value'
el.dispatchEvent(new Event('change'));

And even though you can change element in DOM, input itself holding state inside React so split second before sending form input is changing to original prefilled input