topic Re: Setting form field values with javascript in CMS Development

Setting form field values with javascript

paradummy — Tue, 28 Feb 2023 17:15:38 GMT

Hi folks

I'm trying to set the values for some form fields of a hubspot form with javascript. But the values gets deleted after validation (or in this case after input/change event). I remember that this used to work (and it's also the solutions in a lot of other posts). Has anyone an idea what could be the problem? Or am I doing something wrong?

Re: Setting form field values with javascript

piersg — Tue, 28 Feb 2023 18:41:31 GMT

Have you tried it with the change event instead of input? e.g.

emailfield.dispatchEvent(new Event('change', { 'bubbles': true }));

It may also be worth trying it with bubbling.

Re: Setting form field values with javascript

paradummy — Wed, 01 Mar 2023 12:44:26 GMT

hey @piersg, I tried that as well unfortunately it doesn't trigger the validation at all (and after the form submission it again clears the input). It seems that the react form fields only listen to the input event. I also tried it with jquery as it was mentioned in other posts but without success:

$(companyfield).val("MyCompanyName").change();

Re: Setting form field values with javascript

alyssamwilie — Thu, 02 Mar 2023 13:34:48 GMT

I haven't been able to get the global event listener to work for changing field inputs for a few months now. Not sure if HubSpot made some change that rendered field changing impossible in the event listener or what, but even some of our old forms that we hadn't touched for over a year just straight up suddenly stopped working. Switched to using the form embed code and putting JavaScript directly in the callback. Bit annoying, but it at least works.

hbspt.forms.create({ portalId: '', formId: '', onFormReady: function($form) { // YOUR SCRIPT HERE } });

Re: Setting form field values with javascript

LucyMoss — Thu, 07 Nov 2024 12:27:47 GMT

Did anyone find a solution to this? Looking to pass an ID into a hidden field.

Re: Setting form field values with javascript

Luc_Benayoun — Thu, 05 Dec 2024 10:00:11 GMT

Hi! 👋🏻

A bit late, but I'm getting this to work in my functions.

Maybe it can help someone trying to figure this out!

(() => { const contactForms = document.querySelectorAll(".module--custom-form-contact"); const initContactForm = (contactForm) => { if (contactForm.querySelector(".hs-email input[type=email]")) { contactForm.querySelector(".hs-email input[type=email]").value = "myemail@address.com"; contactForm.querySelector(".hs-email input[type=email]").dispatchEvent(new Event('input', { 'bubbles': true })); } } window.addEventListener('message', event => { if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') { contactForms && contactForms.forEach(contactForm => { if (contactForm.querySelector(".hs-form") && (event.data.id === contactForm.querySelector(".hs-form").dataset.formId)) { initContactForm(contactForm) } }) } }) })();

Cheers,

Luc

Re: Setting form field values with javascript

OChrzan — Thu, 17 Jul 2025 15:55:17 GMT

You can now do this by using the HubSpotFormsV4 JS object. Like this:

Docs are here:

https://developers.hubspot.com/docs/guides/api/marketing/forms/global-form-events#setfieldvalue