[SOLVED] Marketo Form Embed to Vue JS Application

Marketo Form Embed to Vue JS Application

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!

Solution

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);
  }
}