将Marketo表单添加到Gatsby/JSX

Question

我正在尝试将一个Marketo表单添加到Gatsby网站中，但是注入页面的脚本顺序有问题。

当我尝试呈现下面的组件时，会出现错误消息“ReferenceError: MktoForms2未定义”。

我试图将整个useEffect代码块注释掉，发现该组件可以正常呈现到页面上，但没有表单。然后，当我将“MktoForms2.loadForm（'//app-sj11.marketo.com'，“XXX-XXX-XXX”，1608）”粘贴到控制台中时，表单按预期显示出来。

import React, { useEffect } from "react";
import Helmet from "react-helmet";

import "./form.scss";

const FormContactMkto = () => {
  useEffect(() => {
    MktoForms2.loadForm("//app-sj11.marketo.com", "XXX-XXX-XXX", 1608);
  }, []);

  return (
    <div>
      <Helmet>
        <script
          src="//app-sj11.marketo.com/js/forms2/js/forms2.min.js"
          type="text/javascript"
        />
      </Helmet>
      <form id="mktoForm_1608"></form>
    </div>
  );
};

export default FormContactMkto;

我怎样才能将这个 Marketo 表单加载到 Gatsby 页面中？非常感谢您的任何帮助或建议！

- ndub

Answer 1

我为我的项目创建了一个简单的组件。也许在你的情况下会有用。

import React, { useState, useEffect } from 'react';

const marketoScriptId = 'mktoForms';

export default function MarketoForm({ formId }) {
  const [isLoaded, setIsLoaded] = useState(false);

  useEffect(() => {
    if (!document.getElementById(marketoScriptId)) {
      loadScript();
    } else {
      setIsLoaded(true);
    }
  }, []);

  useEffect(() => {
    isLoaded &&
      window.MktoForms2.loadForm(
        '//app-XX.marketo.com',
        'XXX-XXX-XXX',
        formId
      );
  }, [isLoaded, formId]);

  const loadScript = () => {
    var s = document.createElement('script');
    s.id = marketoScriptId;
    s.type = 'text/javascript';
    s.async = true;
    s.src = '//app-XX.marketo.com/js/forms2/js/forms2.min.js';
    s.onreadystatechange = function() {
      if (this.readyState === 'complete' || this.readyState === 'loaded') {
        setIsLoaded(true);
      }
    };
    s.onload = () => setIsLoaded(true);
    document.getElementsByTagName('head')[0].appendChild(s);
  };

  return (
    <div>
      <form id={`mktoForm_${formId}`}></form>
    </div>
  );
}

- Unagi

---

哇，我对React和Gatsby还比较新，我一直在尝试解决这个问题，整个周末都在忙。谢谢！这真的帮了我很大的忙... - manishie