Guided Template and customizing forms

[Angel_Ordax]

Hi guys, here's my issue:

I've created a guided template with a `mktoForm` field so the end user can just select the form they need w/t having to touch any code on the page but for the sake of UX and beauty I want any form that is used on the landing page to prevent the reload and trigger the bootstrap modal element. I managed to prevent the form refresh on submit using embedded forms in a page outside of the Marketo platform using mktoForms2.js but I'm struggling with doing this inside a template.

So far this is my code:

$("form").submit(function (e) {
    e.preventDefault();
    var formId = this.id;  // "this" is a reference to the submitted form
    MktoForms2.loadForm("//app-sjst.marketo.com", "685-KBL-765", formId, function(form) {
      // Add an onSuccess handler
      form.onSuccess(function(values, followUpUrl) {
          // Open thank you msg on modal
          $('#thankYouModal').modal();
          // Return false to prevent the submission handler from taking the lead to the follow up url
          return false;
    });
});

Any ideas?

BTW, this is the page: Webinar test

[Angel_Ordax · Accepted solution]

I'll answer myself.

After some back and forth I decided to change my approach and instead of playing with the form submit I used URL parameters defining the URL redirect on the form to the url of the same landing page adding the parameter "?show_modal=true" at the end and then I used:

$(document).ready(function () {

      if(window.location.href.indexOf("show_modal=true") > -1) {

         $('#thankYouModal').modal();

      }

  });

Works like a charm.

[SanfordWhiteman]

I thought your design was "for the sake of UX" to avoid the reload. Are you reloading the page now?

Also, there's no reason to wrap in DOMContentLoaded (jQuery .ready) if you're checking the location. The location property exists as soon as the document begins parsing. (And check location.search if you want the query string.)

[Angel_Ordax]

I am reloading yes. I didn't had time to find a better way to do it but as soon as I have some extra time I will investigate back my first idea. What I really would love is to know if there's any chance to use mktoForms2 in a LP or if it's just for embedded forms (which wouldn't make much sense to me) bc every time I tried invoking it I get a mkrtoForms2 is not defined. As I said, I have to dig deeper, maybe the order in which I call each script on the DOM is wrong right now, I didn't had a lot of time to check last week.

Also, I'll check the 'location.search', why is it better to  'location.href' though?

Thanks!

[SanfordWhiteman]

What I really would love is to know if there's any chance to use mktoForms2 in a LP

Of course! MktoForms2 is perfectly usable on Marketo-hosted LPs.  You have to have /forms2.min.js loaded first, of course.  You must have been trying to use the MktoForms2 object before the Forms 2.0 library was included.

Also, I'll check the 'location.search', why is it better to 'location.href' though?

Because the browser has already parsed the URL to spec for you.  Your expression will erroneously match the URLs http://www.example.com/show_modal=true/page.html and http://www.example.com/page.html#show_modal=true.

Even if you match on location.search, it will still match http://www.example.com/page.html?dont_show_modal=true, but if you aren't going to put in a real query string parser at least you can reduce the false positives somewhat.