javascript 如何在react js应用程序中插入hubspot表单？

d6kp6zgx 于 2023-01-19 发布在 Java

关注(0)|答案(2)|浏览(157)

我有一个ReactJS网站，我想插入一个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>

Reactjs页面联系人

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>，但这不为我工作。我怎么能插入脚本标签在Reactjs？

JavaScript

来源：https://stackoverflow.com/questions/69317628/how-to-insert-a-hubspot-form-in-a-react-js-app

2条答案

按热度按时间

mwg9r5ms1#

我是这么做的，像施了魔法一样...
1.创建名为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;

1.导入此组件并在页面上使用它：

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>
  );
};

赞(0）回复(0）举报 2023-01-19

0g0grzrc2#

@jeffreyaven发布的函数组件解决方案不起作用（即使执行了JS，目标div也保持不变）。
对我有效的解决方案是基于类组件的：

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>
  );
};

JSFiddle example
来源

赞(0）回复(0）举报 2023-01-19

我来回答

javascript 如何在react js应用程序中插入hubspot表单？

2条答案

相关问题

热门标签

最新问答