# Pre-populating form fields with react

**URL:** <https://community.hubspot.com/t/pre-populating-form-fields-with-react/36332>\
**Category:** CMS Development\
**Created:** [April 27, 2021, 6:40pm UTC](https://community.hubspot.com/t/pre-populating-form-fields-with-react/36332 "2021-04-27T18:40:25Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![MJohnston2](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mjohnston2/32/99678_2.png) [@MJohnston2](https://community.hubspot.com/u/MJohnston2)\
**Post date:** [April 27, 2021, 6:40pm UTC](https://community.hubspot.com/t/pre-populating-form-fields-with-react/36332/1 "2021-04-27T18:40:25Z")

</div>

I am trying to pre-populate some of the input fields in our form which is integrated with our react application.  
I came across this thread which uses jQuery:  
[https://community.hubspot.com/t5/CMS-Development/Embedded-Form-Populating-form-fields/td-p/284953](https://community.hubspot.com/t5/CMS-Development/Embedded-Form-Populating-form-fields/td-p/284953)  
I also read through the hubspot docs which only shows jQuery options for editing input fields:  
[https://legacydocs.hubspot.com/docs/methods/forms/advanced\_form\_options](https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options)  
I tried multiple solutions on there and unfortunately jQuery doesn’t play well with React. I even tried using this NPM package and tried editing via the onReady function as well as in the componentDidMount lifecycle method:  
[https://www.npmjs.com/package/react-hubspot-form](https://www.npmjs.com/package/react-hubspot-form)  
Any idea how to auto-populate form fields with vanilla Javascript, or in a way that works with react?  
Thanks in advance,  
Michael

---

<div class="post-metadata">

**Author:** ![dennisedson](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dennisedson/32/28044_2.png) [@dennisedson](https://community.hubspot.com/u/dennisedson)\
**Post date:** [April 28, 2021, 4:37pm UTC](https://community.hubspot.com/t/pre-populating-form-fields-with-react/36332/2 "2021-04-28T16:37:07Z")

</div>

Hey @MJohnston2

Good question! Adding a couple people to this who might be able to help.

@tjoyce , @kierana! Do either of you have a solution for this?

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [April 30, 2021, 10:49am UTC](https://community.hubspot.com/t/pre-populating-form-fields-with-react/36332/3 "2021-04-30T10:49:19Z")

</div>

Hi @MJohnston2 -

You can use the global javascript events to populate form fields

```lia-code-sample
window.addEventListener("message", function(event){
 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 var form = document.getElementById('form[data-form-id="' + event.data.id + '"]');
 form.querySelector('.company_name')[0].value = 'Google';
 }
});

```

Something like that

---

<div class="post-metadata">

**Author:** ![MSoftware](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/msoftware/32/75413_2.png) [@MSoftware](https://community.hubspot.com/u/MSoftware)\
**Post date:** [November 2, 2021, 2:12pm UTC](https://community.hubspot.com/t/pre-populating-form-fields-with-react/36332/4 "2021-11-02T14:12:11Z")

</div>

@tjoyce I’m wondering how you’re accessing the HubSpot form like this as the HubSpot form I’m trying to reach is in an iframe?

---

<div class="post-metadata">

**Author:** ![ishields2](https://avatars.discourse-cdn.com/v4/letter/i/a9a28c/32.png) [@ishields2](https://community.hubspot.com/u/ishields2)\
**Post date:** [July 8, 2023, 11:57am UTC](https://community.hubspot.com/t/pre-populating-form-fields-with-react/36332/5 "2023-07-08T11:57:20Z")

</div>

Because it’s in an iframe I had to do this

`window.addEventListener("message", function(event){ if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') { var formDocument = document.getElementById('hs-form-iframe-0').contentDocumentformDocument.getElementById('email-' + event.data.id).value = 'example@email.com'; }});`