Guided Template and customizing forms | Community
Skip to main content
Angel_Ordax
Angel_Ordax
Level 2
July 1, 2016
Solved

Guided Template and customizing forms

  • July 1, 2016
  • 1 reply
  • 3193 views

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

Best answer by Angel_Ordax

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.

1 reply

Angel_Ordax
Angel_OrdaxAuthorAccepted solution
Level 2
July 1, 2016

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
SanfordWhiteman
Level 10
July 1, 2016

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
Angel_OrdaxAuthor
Level 2
July 4, 2016

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!

Terms & ConditionsAccessibility statement

Loading footer...