将Marketo表单添加到Gatsby/JSX [英] Adding Marketo Form to Gatsby/JSX
问题描述
我正在尝试将一个Marketo表单添加到Gatsby网站中,但是在将脚本注入到页面的顺序上遇到了麻烦.
I am trying to add a Marketo form into a Gatsby site but have trouble with the order in which scripts are injected into the page.
当我尝试渲染下面的组件时,出现错误消息"ReferenceError:未定义MktoForms2".
When I try to render the component below, I get the error message "ReferenceError: MktoForms2 is not defined".
我尝试注释掉整个useEffect代码块,并且该组件在没有表单的情况下也可以正常显示页面.然后,当我将"MktoForms2.loadForm("//app-sj11.marketo.com","XXX-XXX-XXX",1608)粘贴到控制台中时,该窗体将按预期显示.
I tried commenting out the entire useEffect code block and the component renders to the page fine without the form. Then when I paste "MktoForms2.loadForm("//app-sj11.marketo.com", "XXX-XXX-XXX", 1608)" into the console, the form appears as expected.
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页面中?任何帮助或建议,我们将不胜感激!
How can I load this Marketo form into a Gatsby page? Any help or suggestions are greatly appreciated!
推荐答案
我为我的项目创建了一个简单的组件.也许这对您有用.
I've created a simple component for my project. Maybe it would be useful in your case.
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>
);
}
这篇关于将Marketo表单添加到Gatsby/JSX的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!