Hidden form fields not pre-populating with JavaScript values in embedded ROI Calculator

Marketing & Content Hub Lead Capture Tools
1

Hello Developers!

We’ve embedded a HubSpot form into an ROI Calculator, but hidden fields are not being pre-populated with calculated values from JavaScript variables. We are kindly requesting for your advice on the following:

  • Is there a recommended method to dynamically populate hidden fields in HubSpot forms?
  • Should we use server-side pre-filling (e.g., via HubSpot API) instead of client-side JavaScript?
  • Any known workarounds or best practices for this use case?

Here’s what we’ve tried:

  1. Calculator Inputs: Users enter values into input fields (e.g., number of applicants, hourly rate).
  2. Form Display: When the user clicks “Get My ROI Report”, the HubSpot form is displayed.
  3. Pre-Populate Fields: We use onFormReady to populate hidden HubSpot fields with both user inputs (e.g., applicants, hourly_rate) and calculated values (e.g., total_savings, roi_percentage).

HubSpot Form Embed Code:

<div id="leadForm">
 <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
 <script>
 hbspt.forms.create({
 portalId: "48852168",
 formId: "705dca6a-a671-4b60-8849-da3d06545295",
 region: "na1",
 onFormReady: function(form) {
 // Pre-populate fields here
 const applicants = document.getElementById("applicants").value;
 form.find('input[name="number_of_applicants_"]').val(applicants);

 // Example calculated value:
 const total_savings = 10000; // Simplified for testing
 form.find('input[name="total_savings__us_"]').val(total_savings);
 }
 });
 </script>
</div>

Problem:

  • User Inputs (e.g., applicants) are captured correctly, but hidden fields like number_of_applicants_ do not reflect these values.
  • Calculated Values (e.g., total_savings) also fail to populate.
  • The form submission does not include the pre-filled values.

What We’ve Tried

  1. onFormReady Callback: Used to ensure the form is fully loaded before setting values.
  2. Field Name Verification: Confirmed that the HubSpot field names (e.g., number_of_applicants_) match the portal’s form settings.
  3. Hardcoding Values: Even hardcoded values (e.g., total_savings = 10000) do not work, ruling out calculation logic errors.
2

Hi @Dimster! Welcome to the Community-- happy to have you here :blush:

The Community offers valuable insights from subject matter experts, but for a more comprehensive consultation, consider connecting with a HubSpot Partner in the Solutions Directory.

I want to invite some subject matter experts to see if they have any suggestions.

Hey @alyssamwilie, @coldrickjack, @thekevinpotts do you have any advice to share when passing js values into a HubSpot form?

Best,

Kennedy

3

Hi everyone,

I’m happy to share that the issue I posted about earlier has been resolved! :tada:

The problem was related to pre-populating hidden fields in a HubSpot form embedded in an ROI calculator. After some debugging and help from the community, here’s what fixed it:

  1. Scoped Styles: I wrapped the ROI calculator in a unique container (#roi-calculator-container) and scoped all its styles to this container. This prevented the calculator’s CSS from interfering with other elements on the page.
  2. Unique IDs: I prefixed all IDs with roi- to avoid conflicts with other elements.
  3. Input Validation: I ensured all input values were converted to numbers using parseFloat() and added fallback values (|| 0) to handle empty or invalid inputs.
  4. HubSpot Form Initialization: I used the onFormReady callback to pre-populate the fields only after the form was fully loaded.

With these changes, the form now displays correctly, and the hidden fields are pre-populated as expected.

A big thank you to everyone who offered suggestions and support! :raising_hands:

If anyone is facing a similar issue, feel free to reach out—I’d be happy to help!