尝试在 Gatsby 中的 Hubspot 表单上设置自定义 ID

Question

我可以让 Hubspot 表单作为 Gatsby 中的一个组件工作，但我希望能够为每页设置 formId。我试过在我的组件中设置道具但没有成功。这是一个 page with the form working 的示例，代码如下，删除了我的门户 ID。

import React from "react";

class HubspotBrochureDownload extends React.Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.src = "https://js.hsforms.net/forms/v2.js";
    document.body.appendChild(script);

    script.addEventListener("load", () => {
      if (window.hbspt) {
        window.hbspt.forms.create({
          portalId: "XXXXXX",
          formId: "1152aa7a-835d-410d-9462-08e2ddd226d8",
          target: "#hubspotForm"
        });
      }
    });
  }

  render() {
    return (
      <div>
        <div id="hubspotForm"></div>
      </div>
    );
  }
}

export default HubspotBrochureDownload;

我试过删除我的 formID 并放置道具。我找到了这个 componentDidUpdate 的例子，但没有任何运气

Answer 1

您可以传递道具，以便表单接受不同的 ID。在 componentDidMount(props) 内部传递的 prop 应该知道该 prop 在特定上下文中以便获取它的值，所以你可以做的是在 componentDidMount(props) 范围内使用 this.props。这是我找到的解决方案：-

import React from "react";

class HubspotBrochureDownload extends React.Component {
  componentDidMount(props) {
    const script = document.createElement("script");
    script.src = "https://js.hsforms.net/forms/v2.js";
    document.body.appendChild(script);

    script.addEventListener("load", () => {
      if (window.hbspt) {
        window.hbspt.forms.create({
          portalId: `${this.props.portalID}`,
          formId: "1152aa7a-835d-410d-9462-08e2ddd226d8", //also you can do fromID: `${this.props.formID}`
          target: "#hubspotForm"
        });
      }
    });
  }

  render() {
    return (
      <div>
        <div id="hubspotForm"></div>
      </div>
    );
  }
}

export default HubspotBrochureDownload;

并将其导入另一个文件

import HubspotBrochureDownload from '../components/hubspot';

const MyComponent = props => {

 <HubspotBrochureDownload portalID="xxxxx" />
  // rest of your component
}

尝试在 Gatsby 中的 Hubspot 表单上设置自定义 ID

Trying to set a custom ID on a Hubspot form in Gatsby

forms

hubspot

gatsby