[Vuejs]-Adding multiple Hubspot forms on a single page in Vue

by

0👍

Although after wondering a lot find a really easy solution where you just have to loop through the hbspt.forms.create function and pass the individual object for your desired element.

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

Leave a comment