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

**URL:** <https://community.hubspot.com/t/hidden-form-fields-not-pre-populating-with-javascript-values-in-embedded-roi-calculator/126304>\
**Category:** Lead Capture Tools\
**Tags:** starter\
**Created:** [February 18, 2025, 3:15pm UTC](https://community.hubspot.com/t/hidden-form-fields-not-pre-populating-with-javascript-values-in-embedded-roi-calculator/126304 "2025-02-18T15:15:48Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dimster](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@Dimster](https://community.hubspot.com/u/Dimster)\
**Post date:** [February 18, 2025, 3:15pm UTC](https://community.hubspot.com/t/hidden-form-fields-not-pre-populating-with-javascript-values-in-embedded-roi-calculator/126304/1 "2025-02-18T15:15:48Z")

</div>

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:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![kennedyp](https://avatars.discourse-cdn.com/v4/letter/k/49beb7/32.png) [@kennedyp](https://community.hubspot.com/u/kennedyp)\
**Post date:** [February 18, 2025, 10:22pm UTC](https://community.hubspot.com/t/hidden-form-fields-not-pre-populating-with-javascript-values-in-embedded-roi-calculator/126304/2 "2025-02-18T22:22:04Z")

</div>

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

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](https://ecosystem.hubspot.com/marketplace/solutions).

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

---

<div class="post-metadata">

**Author:** ![Dimster](https://avatars.discourse-cdn.com/v4/letter/d/73ab20/32.png) [@Dimster](https://community.hubspot.com/u/Dimster)\
**Post date:** [February 19, 2025, 12:01pm UTC](https://community.hubspot.com/t/hidden-form-fields-not-pre-populating-with-javascript-values-in-embedded-roi-calculator/126304/3 "2025-02-19T12:01:10Z")

</div>

Hi everyone,

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

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! 🙌

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