4 Replies Latest reply on Jul 4, 2016 11:44 AM by Sanford Whiteman

    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

        • Re: Guided Template and customizing forms
          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.

            • Re: Guided Template and customizing forms
              Sanford Whiteman

              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.)

                • Re: Guided Template and customizing forms
                  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!