Question
How Can I Use Form Functions Found Inside the MktoForms2 API Within a React Component?
I'm building a native react app that loads a Marketo form inside a modal when they hit a CTA button within the app.
import React, { useState, useEffect } from 'react';
const marketoScriptId = 'mktoForms';
export default function MarketoForm({ formId, formData }) {
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
if (!document.getElementById(marketoScriptId)) {
loadScript();
} else {
setIsLoaded(true);
}
}, []);
useEffect(() => {
isLoaded &&
window.MktoForms2.loadForm('//domain', 'munchkinId', formId);
formHandler()
}, [isLoaded, formId]);
const formHandler = () => {
window.MktoForms2.whenReady((form) => {
window.form.MktoForms2.onSubmit()
//this is where things fail
})
}
const loadScript = () => {
var s = document.createElement('script');
s.id = marketoScriptId;
s.type = 'text/javascript';
s.async = true;
s.src='//{domain}/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 (
<form id={`mktoForm_${formId}`}></form>
);
}
This component will successfully load all the scripts necessary and return the form. However, from here, I need to be able to use some of the functions found in the MktoForms2 API, including the form functions.
Specifically, I need to add values to three hidden fields that exist within the Marketo form. The values are coming from the React app ({formData}). I need to add these values when the form is loaded, or before the form is submitted. Either way, they'll exist when the user submits.
I'm having a hard time using any of the form functions found within the MktoForm2 API with this integration