Forms 2.0 javascript file not loading...?

[Anonymous]

At the moment the form 2.0 embeds I'm using aren't working properly because of a missing js file.

I'm using the embed code version of the form which requires the file http://app-sjp.marketo.com/js/forms2/js/forms2.js .

However this isn't loading from an "http" link  - but will load from an  "https" link... I can certainly make that change on my side if this is permenant - is this the intended behavoir?

[Anonymous]

Also -  as  the form 2.0 embed code Marketo provides is synchronous  - it blocks the rest of the page loading if it hangs on loading.

So for the moment I've made an https loading async version of the embed code. This is based on the standard munchkin script they already provide.

 <form id="mktoForm_1234"></form>
<script type="text/javascript">
(function() {
  var didInit = false;
  function initMkto2() {
    if(didInit === false) {
      didInit = true;
      MktoForms2.loadForm("https://app-sjp.marketo.com", "123-ABC-456", 1234);     
    }
  }
  var s = document.createElement('script');
  s.type = 'text/javascript';
  s.async = true;
  s.src = 'https://app-sjp.marketo.com/js/forms2/js/forms2.js';
  s.onreadystatechange = function() {
    if (this.readyState == 'complete' || this.readyState == 'loaded') {
      initMkto2();
    }
  };
  s.onload = initMkto2;
  document.getElementsByTagName('head')[0].appendChild(s);
})();

</script>

[Anonymous · Accepted solution]

The forms should not always load from https.  They use protocol relative urls to load using the same protocol as the page on which they are placed.  Can you provide an example page on which you're seeing with them always load using https?

You are correct that the script that the embed code dialog spits out is synchronous by default.   This is simpler to use for most customers, and it guarantees that scripts load in order and will be able to execute API calls.  However, there is nothing wrong with using a script loader to make the calls asynchronous.   For many customers, waiting for the form to load before showing the rest of the page can be desirable, we've found that most forms live on pages that are form-centric and that don't make much sense rendered without a form in them. 

Although the async script loader posted above works for simple cases, I’d recommend using a more widely deployed and tested script loader.  Here’s how you’d use a script loader like labjs (http://labjs.com/documentation.php) to load the scripts async but in order.  

If your embed code popup spits out this:

<script src="//mlm.ian.dev/js/forms2/js/forms2.js"></script>

<form id="mktoForm_1006"></form>

<script>MktoForms2.loadForm("//mlm.ian.dev", "236-OJN-811", 1006);</script>

Then if you download labjs and put it on your server, you could change the above to this, which would safely load the forms asynchronously.

<form id="mktoForm_1006"></form>

<script src='LAB.js'></script>

<script>

   $LAB

   .script("//mlm.ian.dev/js/forms2/js/forms2.js")  //load the forms library

   .wait(function (){

     MktoForms2.loadForm("//mlm.ian.dev", "236-OJN-811", 1006); //call the loadForm function

   })

</script>

[Anonymous]

Hi,
it looks like today the js file is actually loading from the http address - and not just https. It wasn't a page specific problem - no matter what browser I used I couldn't get the file to load in my pages - or directly.

I'll switch my scripts back to protocol relative now that it's working again. Thanks for the info about Lab.js - that looks like an interesting solution.