I'm trying to add a Marketo form to my Vue Js application but it doesnt seem to be working.
I loaded the initial forms2.min.js script in the created lifecycle hook and that loads just fine. Example code below.
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);
}
Within the html template i added the container element to load the form.
<form id="mktoForm_1057"></form>
Then i created a method that gets triggered by a button to load the form into the container.
createForm(){
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057)
}
As soon as i run the script i get this error "MktoForms2 is not defined." Am i doing something wrong?
Would someone be able to help me out?
Thanks!
It should be
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);
}
It's hitting a snag because MktoForms2 is not defined as a variable. I had to append 'window' to MktoForms2 in order for it to pass linting
window.MktoForms2.loadForm('//app-ab00.marketo.com', '785-UHP-775', 1057)
Here is a little snippet I have used for Marketo templates. Make sure you have their forms2.min.js file loaded before using this script. You could also wrap this in a DOM ready/jQuery ready as well.
// 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);
}
}