Auto-fill HubSpot form input using onFormReady callback

Other Questions HubSpot
1

I’ve got a HubSpot form on my website and I need to automatically fill one of its fields using jQuery. What I want to do is grab some text from an H3 element that has the class “product_heading” somewhere on the same page, then use that text to populate a form field with the ID “item_name” inside the HubSpot form.

I tried writing some code but I’m not sure if I’m doing this correctly. Could someone help me figure out the right approach?

hbspt.forms.create({ 
    portalId: 'my-portal-id',
    formId: 'my-form-id',
    onFormReady: function($form) {
        $("#item_name").val($("h3.product_heading").text());
    }
});

Is this the correct way to handle form field population when the HubSpot form loads?

2

Your approach looks mostly right, but there’s an issue with the jQuery selector scope. HubSpot forms load dynamically, so the field IDs aren’t always available in the global DOM right away. I’ve hit this same problem before - using the $form parameter in the callback works way better.

Try this instead:

hbspt.forms.create({ 
    portalId: 'my-portal-id',
    formId: 'my-form-id',
    onFormReady: function($form) {
        var productText = $("h3.product_heading").text();
        $form.find("#item_name").val(productText);
    }
});

This searches for the field within the specific form instead of the whole document. Fixed my timing issues every time.

3

onFormReady is the right spot, but I hit race condition issues when the H3 hadn’t loaded yet. I added a small delay and checked if the element exists first - worked perfectly. HubSpot forms sometimes load faster than other page elements, especially with lazy loading or if your product heading comes from an API call. I threw mine in a setTimeout with a 100ms delay just to be safe. Also heads up - HubSpot forms can have different field naming depending on how they were created. Sometimes it’s the actual field name instead of a custom ID, so double-check your form’s embed code for the exact selector.

4

I disagree. Manual jQuery breaks every time HubSpot updates their forms or pages load differently.

I fought these same HubSpot issues until I automated everything. Now I use workflows that pre-fill forms based on page context, user behavior, whatever.

Here’s what’s great - you can create rules that detect when someone hits a product page, grab that info, and populate the form. No client-side code, no timing headaches, no DOM wrestling.

You also get better conversion tracking. I set this up for our product demos and got a 40% bump in completions just because people didn’t have to type the product name.

Latenode makes this automation super easy with visual workflows that plug straight into HubSpot’s API.

5

both methods work fine, but add some error checking. what happens if the h3 doesn’t exist or it’s empty? you’ll get blank form values. i do something like var productText = $('h3.product_heading').text() || 'default value'; before setting the field. also, hubspot changes field names sometimes - double check that item_name ID actually exists in your form settings.