HubSpot form creation throws serializeArray method error in onFormReady callback

Other Questions HubSpot
1

I’m working with HubSpot forms and trying to populate form fields with cookie values when the form loads. However, I’m getting an error that says the serializeArray method doesn’t exist on the form object.

The issue happens in my onFormReady callback where I’m trying to serialize form data to map through the fields and set their values from cookies. I want to avoid using jQuery for this implementation.

Here’s my current code:

hbspt.forms.create({
  region: "us1",
  portalId: "12345678",
  formId: "abc-123-def",
  redirectUrl: "/success-page/",
  onFormReady: function(formElement){
    formElement.serializeArray().forEach(field => {
      let storedValue = Cookies.get(field.name);
      if (storedValue && storedValue !== ''){
        formElement.querySelector('input[name="' + field.name + '"]').value = storedValue;
      }
    });
  }
});

What’s the proper way to serialize form data or iterate through form fields without jQuery in HubSpot forms?

2

serializeArray() is def a jQuery thing. Use querySelectorAll(‘input, select, textarea’) to grab all fields, then loop through with forEach. Way easier than dealing with elements collection. Just make sure field.name exists before setting the cookie value.

3

FormData constructor handles this without any external dependencies. I hit the same issue last year migrating legacy forms. Don’t serialize everything upfront - just create a FormData instance and pull the field names directly:

hbspt.forms.create({
  region: "us1",
  portalId: "12345678",
  formId: "abc-123-def", 
  redirectUrl: "/success-page/",
  onFormReady: function(formElement){
    const formData = new FormData(formElement);
    for (let [fieldName] of formData.entries()) {
      let storedValue = Cookies.get(fieldName);
      if (storedValue && storedValue !== '') {
        const field = formElement.querySelector(`[name="${fieldName}"]`);
        if (field) field.value = storedValue;
      }
    }
  }
});

Works consistently across different HubSpot form configs and handles edge cases way better than manually looping through DOM elements.

4

You’re right - serializeArray is a jQuery method, not vanilla JS. I hit this same problem when ditching jQuery dependencies a few months back. Just use formElement.elements to grab all the form controls directly, then filter through them. Way simpler than trying to serialize anything. Here’s what worked for me:

hbspt.forms.create({
  region: "us1",
  portalId: "12345678", 
  formId: "abc-123-def",
  redirectUrl: "/success-page/",
  onFormReady: function(formElement){
    Array.from(formElement.elements).forEach(element => {
      if (element.name) {
        let storedValue = Cookies.get(element.name);
        if (storedValue && storedValue !== '') {
          element.value = storedValue;
        }
      }
    });
  }
});

This skips serialization entirely and just hits each form element directly. Much cleaner than your original approach.

5

The real problem here is you’re trying to use jQuery methods without actually having jQuery loaded. But honestly, this whole manual approach is pretty fragile.

I hit the same issue when building user preference flows - populating forms from cookie data. The manual DOM stuff gets messy quick, especially when HubSpot changes their form structure.

I ended up moving this to an automation platform instead. Now I capture the cookie data via webhook when the form loads, run it through Latenode workflows, and automatically push the values back to populate fields.

You skip all the browser compatibility headaches this way. Plus you get proper logging, error handling, and can tweak the logic without touching frontend code.

The automation handles cookie parsing, validation, and field mapping way more reliably than wrestling with DOM elements.