I'm writing Typescript / React and have created a Context Provider, as well as a custom hook used to render a specific form. Like I said the form renders as expected, but the submit button hangs. My code here is a context provider that exposes the MktoForms2 object which the useMarketoForm hook uses to set load a form.
Context:
const MarketoFormContext = React.createContext();
Context Provider:
const MarketoFormProvider = ({ children }: MarketoFormProviderProps) => {
const extendedWindow = window as ExtendedWindow;
const [marketoFormProviderValues, setMarketoFormProviderValues] = useState(
marketFormProviderDefaults
);
// Loads script tag on first render
useEffect(() => {
const script = document.createElement('script');
script.src='//go.mydomain.com/js/forms2/js/forms2.js';
script.defer = true;
script.onload = () => {
setMarketoFormProviderValues([extendedWindow?.MktoForms2, false]);
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return (
<MarketoFormContext.Provider value={marketoFormProviderValues}>
{children}
</MarketoFormContext.Provider>
);
};
export default MarketoFormProvider;
Custom Hook:
/**
* A React hook used to easily render marketo forms into our frontend
* @param formId the id of the form to render
* @param callback a callback to run code when specific events happen within the form. see https://developers.marketo.com/rest-api/assets/forms/examples/
* @returns the anchor dom element that Marketo will search for and attach the form to
*/
export const useMarketoForm = (formId: number, callback?: (form: object) => void): ReactNode => {
const [mktoForms2, isLoading] = useContext(MarketoFormContext);
const MYDOMAIN_MARKETO_FORMS_HOST = '//go.mydomain.com';
const MYDOMAIN_MARKETO_MUNCHKIN_ID = '264-DBV-179';
useEffect(() => {
if (isLoading) {
console.log('mktoForms2 not yet initialized');
} else {
mktoForms2.loadForm(
MYDOMAIN_MARKETO_FORMS_HOST,
MYDOMAIN_MARKETO_MUNCHKIN_ID,
formId,
callback
);
}
}, [isLoading]);
return <form id={`mktoForm_${formId}`}> </form>;
};
How I use the form in a component:
const MyComponent = () => {
const marketoFormElement = useMarketoForm(1941);
return
<div>
{marketoFormElement}
</div>
}
.png)