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?
3
Answers
Here’s what I did, worked like a charm…
HubspotContactForm
Somehow the functional component solution posted by @jeffreyaven didn’t work (the target div remained unchanged even though JS got executed).
The solution that worked for me was based on a class component:
this component can be used in exactly the same way:
JSFiddle example
Source
I tried jeffreyaven reply but the form wasn’t showing. I removed the destructured props and it worked: