在Vue的单个页面上添加多个Hubspot表单

cgh8pdjw 于 2023-01-17 发布在 Vue.js

关注(0)|答案(1)|浏览(188)

我试图在一个vue页面上添加多个Hubspot表单，但一次只加载一个表单。
这就是我尝试附加单个Hubspot表单的方法。

mounted() {
    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: "1791848",
          formId: "ffad341d-b632-4280-a0c7-7141007bac69",
          target: "#hubspotForm",
        });
      }
    });
  },

vue.js

来源：https://stackoverflow.com/questions/75133277/adding-multiple-hubspot-forms-on-a-single-page-in-vue

1条答案

按热度按时间

taor4pac1#

尽管在想了很多之后，还是找到了一个非常简单的解决方案，您只需循环hbspt.forms.create函数，并为所需的元素传递单个对象。

beforeMount() {
    const script = document.createElement("script");
    script.src = "https://js.hsforms.net/forms/v2.js";
    document.body.appendChild(script);
    script.addEventListener("load", () => {
        if (window.hbspt) {
          const forms = [
            {
              portalId: "XXXXX",
              formId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
              target: "#hubspotForm1",
            },
            {
              portalId: "XXXXX",
              formId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
              target: "#hubspotForm2",
            },
            {
              portalId: "XXXXX",
              formId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
              target: "#hubspotForm3",
            },
          ];
          forms.forEach(form => {
            window.hbspt.forms.create(form);
          });
        }
    });
  },

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

我来回答

在Vue的单个页面上添加多个Hubspot表单

1条答案

相关问题

热门标签

最新问答