Marketo表单嵌入到Vue JS应用程序

62lalag4  于 2023-03-24  发布在  Vue.js
关注(0)|答案(3)|浏览(175)

我试图添加一个Marketo表单到我的Vue Js应用程序,但它似乎不工作。
我在创建的生命周期钩子中加载了初始的forms2.min.js脚本,它加载得很好。

created() {
                  const scriptTag = document.createElement('script');
                  scriptTag.src = "//app-ab00.marketo.com/js/forms2/js/forms2.min.js";
                  scriptTag.setAttribute('charset', 'utf-8');
                  document.head.appendChild(scriptTag);
            }

在HTML模板中,我添加了容器元素来加载表单。

<form id="mktoForm_1057"></form>

然后我创建了一个方法,该方法由一个按钮触发以将表单加载到容器中。

createForm(){
    MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057)
}

当我运行脚本时,我得到这个错误“MktoForms 2未定义”。我做错了什么吗?
有人能帮我吗?
谢谢!

y0u0uwnf

y0u0uwnf1#

应该是

created() {
    const scriptTag = document.createElement('script');
    scriptTag.src = "//app-ab00.marketo.com/js/forms2/js/forms2.min.js";
    scriptTag.setAttribute('charset', 'utf-8');
    scriptTag.onload = function() {
        MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057);
    };
    document.head.appendChild(scriptTag);
}
ql3eal8s

ql3eal8s2#

它遇到了一个障碍,因为MktoForms2没有被定义为一个变量。

window.MktoForms2.loadForm('//app-ab00.marketo.com', '785-UHP-775', 1057)
zpgglvta

zpgglvta3#

这是我在Marketo模板中使用的一个小片段。在使用这个脚本之前,确保你已经加载了他们的forms2.min.js文件。你也可以把它 Package 在一个DOM ready/jQuery ready中。

// check if we have their forms2.min.js script available
if (window.MktoForms2) {
  // error handling
  try {
    MktoForms2.loadForm(baseUrl, munchkin_id, formId, function(form) {
      // code to execute after load form
    });
    MktoForms2.whenRendered(function(a) {
      // code to execute after the form has rendered its markup
      var fid = a.getId(); // form id
    });
  } catch (a) {
    console.log(a);
  }
}

相关问题