topic Re: New Forms: How to fill hidden fields with JavaScript in Lead Capture Tools

New Forms: How to fill hidden fields with JavaScript

dash-flow-io — Sun, 09 Mar 2025 21:03:17 GMT

Huge pain point:

The Legacy Forms allowed to inject javascript to for example update form values or write data to hidden fields for tracking or various other use cases.

The new forms use a pure iframe implementation.

How can this be done with the new forms?

With global form events - set field value one could set hidden fields, but it is unclear how to tell the iframe to execute this javascript.

Re: New Forms: How to fill hidden fields with JavaScript

Mike_Eastwood — Sun, 09 Mar 2025 22:01:43 GMT

Hi @dash-flow-io

Recently I've seen forms int he wild removing the iFrame, using a new implementation.

I haven't been able to figure out when the changes happen.

To target a value in an iFrame this is what I used:

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js" defer></script> <script> var change_me = "123"; window.addEventListener('message', event => { if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') { document.getElementById("hs-form-iframe-0").contentDocument.querySelector('input[name="change_me"]').value = change_me; } }); </script>

But, as mentioned, I'm looking at changing this and using a new implementation (without the iFrame).

Have fun

Mike

Here to learn more about HubSpot and share my HubSpot Knowledge. I'm the founder of Webalite a Gold HubSpot Partner Agency based in Wellington, New Zealand and the founder of Portal-iQ the world's first automated HubSpot Portal Audit that helps you work smarter with HubSpot.

Re: New Forms: How to fill hidden fields with JavaScript

dash-flow-io — Sun, 09 Mar 2025 22:25:12 GMT

the embed code you use seems to be a legacy form. the new forms use different embedding.

Re: New Forms: How to fill hidden fields with JavaScript

dash-flow-io — Sun, 09 Mar 2025 22:30:22 GMT

The following approaches also fail:

1. FAIL: prefill values in the iframe div

<div class="hs-form-frame"> data-region="eu1" data-form-id="{{formid}}" data-portal-id="{{portal}}" data-hs-custom-field-myfield="example" data-hs-prefill="myfield=example" </div>

2. FAIL: sending postMessage to iframe

<html> <script> document.addEventListener('DOMContentLoaded', () => { const FORM_ID = '...'; const FIELD_NAME = 'myfield'; // Updated field name const IFRAME_SELECTOR = `iframe[data-test-id="embedded-form-${FORM_ID}"]`; const handleFormReady = (hsIframe) => { // Log iframe details console.log('HubSpot iframe detected:', hsIframe); console.log('Iframe attributes:', Object.fromEntries( Array.from(hsIframe.attributes).map(attr => [attr.name, attr.value]) )); // Get iframe origin const iframeOrigin = new URL(hsIframe.src).origin; // Message handler for HubSpot form events const messageHandler = (event) => { if (event.origin !== iframeOrigin) return; // Debug: Log all messages from HubSpot iframe console.log('Received HubSpot message:', event.data); if (event.data?.type === 'hsFormCallback' && event.data?.eventName === 'onFormReady' && event.data?.data?.formId === FORM_ID) { // Send field update with corrected field name hsIframe.contentWindow.postMessage({ type: 'hsFormRequest', // This is typically correct for HubSpot data: { fields: [{ name: FIELD_NAME, value: 'example' }] } }, iframeOrigin); } }; window.addEventListener('message', messageHandler); }; // Initial iframe detection const hsIframe = document.querySelector(IFRAME_SELECTOR); if (hsIframe) return handleFormReady(hsIframe); // Setup mutation observer for dynamic loading new MutationObserver((_, observer) => { const iframe = document.querySelector(IFRAME_SELECTOR); if (iframe) { handleFormReady(iframe); observer.disconnect(); } }).observe(document.body, { childList: true, subtree: true }); }); </script>  <script src="https://js-eu1.hsforms.net/forms/embed/{{someid}}.js" defer></script> <div class="hs-form-frame" data-region="eu1" data-form-id="{{formid}}" data-portal-id="{{portal}}"> </div> </html>

Re: New Forms: How to fill hidden fields with JavaScript

TomM2 — Mon, 10 Mar 2025 10:37:15 GMT

Hey @dash-flow-io I can't definitely see this being a large pain point. I'd recomend sharing this with the product team through a feature request on the ideas forum here!

Re: New Forms: How to fill hidden fields with JavaScript

dash-flow-io — Wed, 12 Mar 2025 15:17:04 GMT

Hi Baskey, i think there is typo, you wrote "can't" but I think you meant "can"?

Re: New Forms: How to fill hidden fields with JavaScript

TomM2 — Thu, 13 Mar 2025 16:20:42 GMT

Hi @dash-flow-io yep, you're correct, that is a typo. I have fat fingers and have to type a lot throughout my day.
That still doesn't change my recomendation on opening this as a feature request to the product team however.

Re: New Forms: How to fill hidden fields with JavaScript

Mike_Eastwood — Wed, 22 Oct 2025 09:34:14 GMT

Hi @dash-flow-io

It works for legacy forms! I changed the javascript and removed the iFrame targeting.

Before (using old iFrame implementation)

... document.getElementById("hs-form-iframe-0").contentDocument.querySelector('input[name="change_me"]').value = change_me; ...

After

... document.querySelector('input[name="change_me"]').value = change_me; ...

Final Code

Does it work for you?

Mike

Re: New Forms: How to fill hidden fields with JavaScript

Mike_Eastwood — Sun, 30 Mar 2025 03:06:51 GMT

Hi @dash-flow-io

p.s. My script is embedded in the html of a custom module; but I've also made it work in the javascript using the onFormReady Embed Code Callback.

IMPORTANT: The form must be "Set as raw HTML form" in the Form's Style Options (so, this only works for Markeitng Pro or Enterprise).

Have fun

Mike

Re: New Forms: How to fill hidden fields with JavaScript

dash-flow-io — Sun, 30 Mar 2025 17:06:17 GMT

Your example refers to the legacy forms, not the new multi-step forms.