javascript - 如何在 react js 应用程序中插入 hubspot 表单?
问题描述
我有一个 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>
);
};
推荐阅读
- android - CoordinatorLayout, AppBarLayout 带半透明状态栏
- java - Why is my acceleration sensor still working after closing the activity?
- amazon-web-services - 将按需计费选项更改为 1 年预留
- vespa - Vespa 中的第三方 API 调用
- python - NFA 的 Python 正则表达式
- java - PCF(Pivotal CLoud Foundry)正在将内容长度附加到我的应用程序中
- reactjs - 添加取消图标以关闭 Material-UI Drawer
- bash - 如何在 shell for 循环中延迟评估命令
- selenium - 量角器 browser.manage().logs().get('performance') 未检索服务器响应正文
- java - UriComponentsBuilder - 如何替换一些查询参数并删除未使用的?