# HELP: Embed a form in a React component

**URL:** <https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768>\
**Category:** APIs & Integrations\
**Tags:** forms\
**Created:** [July 28, 2016, 12:48am UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768 "2016-07-28T00:48:07Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [July 28, 2016, 12:48am UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/1 "2016-07-28T00:48:07Z")

</div>

Hi all,

I’m having trouble embedding a hubspot form into a React component. JSX will consider the script tag as a React component itself and try to compile it as such. Have you guys tried to integrate a hubspot form with react before?

Any help would be appreciated! thanks!

fabrice

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [October 12, 2016, 8:39pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/2 "2016-10-12T20:39:52Z")

</div>

Did you ever solve this problem? I’m encountering the same issue now and don’t know how to fix it…

---

<div class="post-metadata">

**Author:** ![3PETE](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/3pete/32/61905_2.png) [@3PETE](https://community.hubspot.com/u/3PETE)\
**Post date:** [October 12, 2016, 10:04pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/3 "2016-10-12T22:04:27Z")

</div>

@Alena and [@fabrice](https://community.hubspot.com/u/fabrice)

I just spun something up really quickly. Here is my code so I hope this helps. You can’t unfortunately use script tags in a render function as noted above. Let me know if this solves your problem or not. The first part calls the HubSpot script from our servers and the second part will then use the contents of said script to place the form in your component. I had to use a later lifecylce stage to get it to work. I was hoping it would have worked with componentDidMount(){} but it seemed to be firing to fast before the WillMount() could full finish loading the script.

```auto
export default class Foo extends Component {
componentWillMount(){

const script = document.createElement("script");

 script.src = "https://js.hsforms.net/forms/v2.js";
 script.async = true;

document.body.appendChild(script);

 }
 componentDidUpdate(){
 //you will need to change the below to match your portal ID and your form ID
 hbspt.forms.create({ 
 portalId: '2323210',
 formId: 'd8232cf6-b9ed-4abc-a81e-585801849cea'
 });
 }
 render() {

```

…Your Render code below

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [October 13, 2016, 8:47pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/4 "2016-10-13T20:47:31Z")

</div>

Hi [@pmanca](https://community.hubspot.com/u/pmanca) !

Thanks for that. I implemented it as per your instructions but unfortunately that still doesn’t work. It throws the error that hbspt doesn’t exist, when this runs as the library is probably not fully loaded yet when I’m calling the forms.create function.

I’ve solved it by hardcoding the first script part where the library is loaded onto my root HTML (in Rails) and then moving the function call into the componentDidMount.

Works for me although it feels dirty…  
 ![smiley.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/6/661022f7ab64c2a9a393cafa79c5009492be2b9f.png)

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [August 11, 2017, 8:52pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/5 "2017-08-11T20:52:52Z")

</div>

I am new to react …but How should we use the render function in that case?  
Basically what should be inserted in the render method so that it get the information from the componentDidUpdate method?

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [January 27, 2017, 2:55am UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/6 "2017-01-27T02:55:30Z")

</div>

Still not working, I’m hacking it as @Alena did but it is really gross. Can you please provide a solution for this? Thanks

---

<div class="post-metadata">

**Author:** ![CaseyBinkley](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/caseybinkley/32/30597_2.png) [@CaseyBinkley](https://community.hubspot.com/u/CaseyBinkley)\
**Post date:** [April 2, 2017, 12:54pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/7 "2017-04-02T12:54:01Z")

</div>

Since we’re dealing with iframes anyway, I created another iframe pointing to a route that only had the hubspot div and script.

/contact

```auto
<iframe className="meetings-wrapper" src="/meetings"></iframe>

```

/meetings

```auto
<html>
 <body>
 <div style="max-width: 500px;" class="meetings-iframe-container" data-src="https://app.hubspot.com/meetings/youruser?embed=true"></div>
 <script type="text/javascript" src="https://static.hsappstatic.net/MeetingsEmbed/ex/MeetingsEmbedCode.js"></script>
 </body>
</html>

```

---

<div class="post-metadata">

**Author:** ![DGomez2](https://avatars.discourse-cdn.com/v4/letter/d/ea666f/32.png) [@DGomez2](https://community.hubspot.com/u/DGomez2)\
**Post date:** [August 2, 2022, 6:03pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/8 "2022-08-02T18:03:45Z")

</div>

hello there, there a simple and better way to do that, just install via npm this package

[https://www.npmjs.com/package/react-hubspot-form](https://www.npmjs.com/package/react-hubspot-form)

```lia-code-sample
 import HubspotForm from 'react-hubspot-form'

<HubspotForm
 portalId='22384747'
 formId='556eed30-2d51-4224-86f8-ffa83f0bde15'
 onSubmit={() => console.log('Submit!')}
 onReady={(form) => console.log('Form ready!')}
 loading={<div>Loading...</div>}
 />

```

that work for me and was so easy, also i recomend remove strict mode from your index, i got a problem with that i dont know why but my form was rendering twice, i just removed that and that way i fixed the form, if have question reply 😃

---

<div class="post-metadata">

**Author:** ![aalstes](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/aalstes/32/53612_2.png) [@aalstes](https://community.hubspot.com/u/aalstes)\
**Post date:** [January 31, 2020, 7:17pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/9 "2020-01-31T19:17:11Z")

</div>

Aweome, this definitely helped me! Thanks. I used useEffect instead of componentDidMount, with success.

---

<div class="post-metadata">

**Author:** ![DHawkings](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/dhawkings/32/44503_2.png) [@DHawkings](https://community.hubspot.com/u/DHawkings)\
**Post date:** [November 3, 2021, 5:41pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/10 "2021-11-03T17:41:37Z")

</div>

This is great. Worked perfectly for us right away. Thank you!

Here is a typescript friendly version (really just supressing the warnings) that uses a functional component and useEffect instead of class component and componentDidMount.

```lia-code-sample
import React, {useEffect} from "react";

const HubspotContactForm = () => {
 useEffect(() => {
 const script = document.createElement('script');
 script.src='https://js.hsforms.net/forms/v2.js';
 document.body.appendChild(script);

 script.addEventListener('load', () => {
 // @TS-ignore
 if (window.hbspt) {
 // @TS-ignore
 window.hbspt.forms.create({
 portalId: 'YOUR_PORTAL_ID_HERE',
 formId: 'YOUR_FORM_ID_HERE',
 target: '#hubspotForm'
 })
 }
 });
 }, []);

 return (
 <div>
 <div id="hubspotForm"></div>
 </div>
 );

}

export default HubspotContactForm;

```

---

<div class="post-metadata">

**Author:** ![EdCupaioli](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/edcupaioli/32/103251_2.png) [@EdCupaioli](https://community.hubspot.com/u/EdCupaioli)\
**Post date:** [May 25, 2022, 9:34pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/11 "2022-05-25T21:34:57Z")

</div>

I took a different (slightly more complicated) approach but ended up a functioning form. I just added the base script to a Helmet tag and added the window.hbspt parameter for useEffect.

```lia-code-sample
const hubspotForm = () => {
useEffect(() => {
 if (window.hbspt) {
 window.hbspt.forms.create({
 portalId: "YOUR-PORTAL-ID",
 formId: "YOUR-FORM-ID",
 target: "YOUR-FORM-CONTAINER-ID"
 });
 }
 },[window.hbspt])
return (
<>
<Helmet>
 <script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"> </script>
</Helmet>
</>
)
}

```

It’s working for me just fine but I’m still a react noob so let me know if it doesn’t work for y’all.

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [May 25, 2022, 11:49pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/12 "2022-05-25T23:49:45Z")

</div>

Thanks for adding your solution, @EdCupaioli 🙌

— Jaycee

---

<div class="post-metadata">

**Author:** ![PPetkov](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ppetkov/32/197166_2.png) [@PPetkov](https://community.hubspot.com/u/PPetkov)\
**Post date:** [December 12, 2022, 7:52pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/13 "2022-12-12T19:52:50Z")

</div>

That works perfectly and it submitting, but after refreshing the page, the form doesn’t load. Any fix to this? Probably somehow using state?

---

<div class="post-metadata">

**Author:** ![ivanakcheurov](https://avatars.discourse-cdn.com/v4/letter/i/b5a626/32.png) [@ivanakcheurov](https://community.hubspot.com/u/ivanakcheurov)\
**Post date:** [January 18, 2023, 1:47pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/14 "2023-01-18T13:47:39Z")

</div>

I try this code in Next.js application, the script gets loaded, hbspt.form.create gets executed but the form doesn’t show up, so the target remains unchanged.  
The solution that worked for me was the [answer based on class components.](https://community.hubspot.com/t5/APIs-Integrations/HELP-Embed-a-form-in-a-React-component/m-p/230049/highlight/true#M8945)

---

<div class="post-metadata">

**Author:** ![SSopin](https://avatars.discourse-cdn.com/v4/letter/s/aeb1de/32.png) [@SSopin](https://community.hubspot.com/u/SSopin)\
**Post date:** [October 19, 2023, 7:54pm UTC](https://community.hubspot.com/t/help-embed-a-form-in-a-react-component/11768/15 "2023-10-19T19:54:51Z")

</div>

Here is a Typescript version without warnings suppression:

```lia-code-sample
import {useEffect} from "react";

const SubscriptionForm = () => {
 useEffect(() => {
 const script = document.createElement('script');
 script.src='https://js.hsforms.net/forms/v2.js';
 document.body.appendChild(script);

 script.addEventListener('load', () => {
 if ((window as any).hbspt) {
 (window as any).hbspt.forms.create({
 portalId: 'YOUR-PORTAL-ID',
 formId: 'YOUR-FORM-ID',
 target: '#hubspotForm'
 })
 }
 });
 }, []);

 return (
 <div>
 <div id="hubspotForm"></div>
 </div>
 );

}

export default SubscriptionForm;

```