i have a react js website and i want to insert a hubspot form.
Hubspot form:
<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/shell.js"></script>
<script>
hbspt.forms.create({
region: "eu1",
portalId: "25082527",
formId: "8a7c2adb-5c41-4c47-8478-b1f1abe01e3f"
});
</script>
react js page contact
import React from 'react';
import SEO from "../common/SEO";
import Layout from "../common/Layout";
import ContactOne from "../elements/contact/ContactOne";
const ContactPage = () => {
return (
<>
<SEO title="Contact" desc="EXIGOH - Contact us now"/>
<Layout>
<div className="main-content">
{/* Start Contact Area */}
<div className="rwt-contact-area rn-section-gap">
<div className="container">
<div className="row">
<div className="col-lg-12 mb--40">
<div className="text-center">
<h1 className="title theme-gradient h2" dangerouslySetInnerHTML={{__html: 'The Easiest Way To Start <br /> fill in & send.'}}/>
</div>
</div>
</div>
**<<<<<<<< -------------- insert it here >>**
{/*<ContactOne/>*/}
</div>
</div>
{/* End Contact Area */}
</div>
</Layout>
</>
)
}
export default ContactPage;
so my question is: how can i do that? i tried to use <helmet> but this don't work for me. how can i insert script tags in react js?
Here's what I did, worked like a charm...
HubspotContactForm import React, {useEffect} from "react";
const HubspotContactForm = props => {
const { region, portalId, formId } = props;
useEffect(() => {
const script = document.createElement('script');
script.src='https://js.hsforms.net/forms/shell.js';
document.body.appendChild(script);
script.addEventListener('load', () => {
// @TS-ignore
if (window.hbspt) {
// @TS-ignore
window.hbspt.forms.create({
region: {region},
portalId: {portalId},
formId: {formId},
target: '#hubspotForm'
})
}
});
}, []);
return (
<div>
<div id="hubspotForm"></div>
</div>
);
};
export default HubspotContactForm;
import {
HubspotContactForm,
} from '../components';
export default function MyPage() {
return (
<main>
<div className="container">
<div className="row">
<div className="col">
<HubspotContactForm
region="na1"
portalId="12345678"
formId='4333d218-20e3-41f9-a478-47bd0c26bf1a'
/>
</div>
</div>
</div>
</main>
);
};