pre filling hubspot form data across browser

Developer Support CMS Development
1

i have built a form using form. pre filled data is available in same browser or device. is it possible that hubspot form can be filled across browser. i found a solution to create query string but for that in the string we need to pass form fields we want to be pre filled. but this solution is not efficient if we have say 100 or more we fields to be pre filled. we cant pass this many fields in string. is there any other way to get pre filled data across browser

2

Hi @Waseem2,
Thank you for posting to the Community!
I understand that you’re looking for a more efficient way to pre-fill HubSpot form data across different browsers or devices, without having to use lengthy query strings for many form fields.
Tagging in some of our Subject Experts to see if they can offer any guidance here -- Hi @AdamLPW @matt_scott and @tjoyce Do any of you all have any ideas on this one?
Thank you!
Cassie, Community Manager

3

Greetings (Assalam o Alaikum) brother @Waseem2,

1. When users are logged in.

The best possible solution I guess could be to achieve this purpose is to implement server side Prefill via HubSpot Forms API. Here’s how it looks:

  • When a known user visits (you can identify them by login),
  • You query HubSpot’s Contacts API for their data,
  • And dynamically populate the form’s fields before rendering (instead of relying on HubSpot’s client-side script).

Pros:

  • Works across browsers/devices.
  • Scalable (you can prefill 100+ fields programmatically).

Cons:

  • Requires backend integration.
  • HubSpot’s embedded forms use an <iframe>, so you may need to use the HubSpot Forms API (not the embed code) to render the form directly on your site.

2. When user is not logged in

If users aren’t logged in, then a possible identifier can help to achieve the goal. Maybe you can identify user from the email id (for example ?email=test@test.com) when they first type in the email in the form field. As soos as user fills the email id field, backend works starts:

  • Query HubSpot’s Contacts API
  • Retrieve all stored contact properties

Pros:

  • Works cross-browser and cross-device.
  • Completely privacy-safe — no hidden tracking.
  • Prefill happens instantly after identification.
  • No manual link personalization or UID management.

Cons:

  • The user must type identifying field to trigger the prefill automation

Hope it helps.

Happy Hubspotting.

Thanks & Regards

Dilshad Shaikh

4

Hi Dilshad,

How do you dynamically populate the form fields before rendering with the new forms? I cant find any documentation on this.
Thank you,

Charlie

5

For anyone looking: Global form events - HubSpot docs

6

Greetings @CDiRaddo,

For this you can Query String Prefill for new forms, for example:

You can dynamically generate this URL on your site before rendering the iframe:

<iframe src="https://share.hsforms.com/1/FORM_ID?firstname={first_name}&email={email_id}"></iframe>

Or dynamically rewrite it in JS before loading the form:

const params = new URLSearchParams({
 firstname: "Test Name",
 email: "test@test.com"
});
document.querySelector("#formFrame").src=`https://share.hsforms.com/1/FORM_ID?${params.toString()}`;

It can work with new HubSpot forms, since data passes via controlled URL

Hope it helps, if it does then help the community by marking it as a solution.

Happy Hubspotting.

Thanks & Regards

Dilshad Shaikh

7

Hi Dilshad,

I appreciate you for responding to this! I don’t doubt your solutions work, though I have not tried them. What I did was listen for

hs-form-event:on-ready

and use the setFieldValue function from the documentation. Example:

HubSpotFormsV4.getFormFromEvent(event).setFieldValue('0-1/firstname', 'John');

Though perhaps your iframe solution would be good to try, since I am having trouble with getting the form to reset itself without having to refresh the page.

Happy Hubspotting!

Charlie

8

Hi Waseem,

This may not completely satisfy your use case, but, just in case, another option to consider is the form shortening feature in HubSpot:

9

Hi @Waseem2,

Cross-browser form pre-fill is not possible with HubSpot’s built-in method, since it depends on cookies, which only work on the same browser. For lots of fields, you might want to do what websrey suggested: fetch user data from HubSpot’s API, either when they log in or enter something unique like an email. That way, your form can be filled from the backend instead of relying on cookies.

Hope this helps. Feel free to ask more!