Form field preset values disappear after the form load

[nidheeshk-web5]

In our project, we're using a HubSpot form for the product enquiry page. We've managed to retrieve the current product SKU and name and stored them in a JavaScript variable. We then used these values to populate two fields in the form (Product SKU and Product Name) and set those fields as read-only to prevent editing. We embedded this form as raw HTML.

However, we are currently facing an issue with the form. The preset values are not always displayed and they disappear after the form completely loads. Do you have any suggestions on how we can do it?

We have attached the video recording link for the HubSpot form below here.
Video Link: https://vimeo.com/1005731734?share=copy

[BarryGrennan · Accepted solution]

Wrap your javascript in a form event listener that waits until the form has loaded.

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
     YOUR CODE HERE
   }
});

https://legacydocs.hubspot.com/global-form-events

---

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

[GiantFocal]

Hi @nidheeshk-web5,

From your screenshare, it appears that another JavaScript code is overwriting the values.

Can you also confirm if your JavaScript runs on window load?