[英]How to insert a hubspot form in a react js app?
我有一个 React JS 网站,我想插入一个 hubspot 表单。
Hubspot形式:
<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 页面联系方式
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;
所以我的问题是:我该怎么做? 我尝试使用<helmet>
但这对我不起作用。 我如何在 React JS 中插入脚本标签?
这就是我所做的,就像一个魅力......
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>
);
};
不知何故,@jeffreyaven 发布的功能组件解决方案不起作用(即使执行了 JS,目标 div 仍保持不变)。
对我有用的解决方案基于 class 组件:
import React from "react";
class HubspotContactForm extends React.Component<{
portalId: string;
formId: string;
region: string;
}> {
componentDidMount() {
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({
target: "#hubspotForm",
...this.props,
});
}
});
}
render() {
return (
<div>
<div id="hubspotForm" />
</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>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.