21 Replies Latest reply on Nov 9, 2015 2:24 PM by Robb Barrett PRD

    On form submit, replace form with "thank you" message

      Is there a way to do this without bringing a second landing page into the equation, as suggested by this post:

      https://community.marketo.com/MarketoDiscussionDetail?id=90650000000PSMjAAO

      I've come across some steps for getting at the form's embed text to make the form "disappear" on submit:

      http://developers.marketo.com/documentation/websites/forms-2-0/

      But when I followed these steps, I was unable to edit the embed code in Marketo, and wasn't sure where to copy and paste that code without affecting the functionality currently in place (in other words, I don't want to break the basic form functionality).

      Inside my index.html file, I have the following JS:

               <script type="text/javascript">
                 function formSubmit(elt) {
                   var formSubmit = Mkto.formSubmit(elt);
                   if (!formSubmit) {
                     jQuery('span.mktFormSubmitError').show();
                     return false;
                   }
                   return true;
                 }
                 function formReset(elt) {
                   return Mkto.formReset(elt);
                 }
               </script>

           Which is used as an event handler when the Submit button is clicked:

           <a onclick='formSubmit(document.getElementById("mktForm_1024")); return false;' href="#" class="button">SUBMIT</a>

           Could the answer lie in making changes to the code inside the above script tag, or is there another way I should go about this? What about jQuery's .load() method?
        • Re: On form submit, replace form with "thank you" message
          Matt Stone
          You won't edit the embed code within Marketo, you'll edit it when you add it to your site... so using the example on the link you posted, you'll get the following code from Marketo:

          <script src="//app-sjqe.marketo.com/js/forms2/js/forms2.js"></script>
               <formid="mktoForm_621"></form>
               <script>MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621);</script>

          The customization happens in the last line, where you change it to this:

          <script>MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621, function(form){
            //Add an onSuccess handler
            form.onSuccess(function(values, followUpUrl){
              //get the form's jQuery element and hide it
              form.getFormElem().hide();
              //return false to prevent the submission handler from taking the lead to the follow up url.
              return false;
            });
          });</script> 

               So basically if you look at the comments in that code, you can see where you will specify how to hide the form itself. All you would need to do is create a hidden "thank you" block on the page and then un-hide that one as you hide the form.

               Does that make sense?
          • Re: On form submit, replace form with "thank you" message
            Sure, I understand that. But what if this is on a standalone site? I already have a form on the page - wouldn't adding this additional form element complicate matters? 
            • Re: On form submit, replace form with "thank you" message
              Hi Andrew,
              what do you mean with an additional form element? You have a form on this page, and you want it to hide when submitting or the new one when submitting? If it's a marketo form use Matt's embedd code instead of the one you use at the moment.

              Best regards

              Steffen

              @Matt S: Great idea ;) Was thinking about it like 10 minutes and didn't come to the idea just placing the text behing the form ;)
              • Re: On form submit, replace form with "thank you" message
                Matt Stone
                If you have multiple forms on the same page, this shouldn't affect those. You're specifying the form via an ID in the jQuery so the code is only pertaining to that form.
                • Re: On form submit, replace form with "thank you" message
                  Additionally, I'm assuming the <form> element in my embed code should match the actual form's ID? 

                  In this instance, the ID in the embed code is 1026, but my actual form's ID is 1024...but then again, I've tried it with both and the steps you advised me to take aren't working. Any additional insights to offer? Thanks for your help.
                  • Re: On form submit, replace form with "thank you" message
                    Hi Andrew,
                    take the marked elements out here: 

                    <script src="//app-sjqe.marketo.com/js/forms2/js/forms2.js"></script>
                    <formid="mktoForm_621"></form>
                    <script>MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198",621);</script>

                    and put them in here:


                    <script>MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198",621, function(form){
                      //Add an onSuccess handler
                      form.onSuccess(function(values, followUpUrl){
                        //get the form's jQuery element and hide it
                        form.getFormElem().hide();
                        //return false to prevent the submission handler from taking the lead to the follow up url.
                        return false;
                      });
                    });</script>

                          
                    When anything of the marked fields is different your from marketo provided embedd code, you also need to change it in the code which you implement.
                    • Re: On form submit, replace form with "thank you" message
                      Okay, so in the body of my HTML, I have a form like this:

                           <form action="http://customers.tryloom.io/index.php/leadCapture/save" class="form-horizontal lpeRegForm formNotEmpty form-inline" enctype="application/x-www-form-urlencoded" id="mktForm_1024" method="post" name="mktForm_1024">
                                               <div class="form-group first-name">
                                                   <div class="mktFormReq mktField"><label class="col-sm-2 control-label"></label><span class=
                                                   "mktInput col-sm-10"><input class="form-control mktFormText mktFormString mktFReq" id="FirstName"
                                                   maxlength="255" name="FirstName" tabindex="1" type="text" value="" placeholder="First Name"><span class="mktFormMsg"></span></span></div>
                                               </div>
                                               <div class="form-group last-name">
                                                   <div class="mktFormReq mktField"><label class="col-sm-2 control-label"></label><span class=
                                                   "mktInput col-sm-10"><input class="form-control mktFormText mktFormString mktFReq" id="LastName"
                                                   maxlength="255" name="LastName" tabindex="2" type="text" value="" placeholder="Last Name"><span class="mktFormMsg"></span></span></div>
                                               </div>
                                               <div class="form-group">
                                                   <div class="mktField mktFormReq"><label class="col-sm-2 control-label"></label><span class="mktInput col-sm-10"><input class="form-control mktFormText mktFormEmail mktFReq" id="Email" maxlength="255" name="Email" tabindex="5" type="email" value="" placeholder="Email Address" required><span class="mktFormMsg"></span></span></div>
                                               </div>
                                               <div id="mktFrmButtons">
                                                   <label> </label>
                                                   <div class="buttonSubmit">
                                                       <a onclick='formSubmit(document.getElementById("mktForm_1024")); return false;' href="#" class="button">SUBMIT</a>
                                                   </div>
                                               </div>
                                               <span style="display:none;">
                                                   <input name="_marketo_comments" type="text" value="">
                                               </span>
                                               <input name="lpId" type="hidden" value="1111">
                                               <input name="subId" type="hidden" value="117">
                                               <input name="munchkinId" type="hidden" value="882-OYR-915">
                                               <input name="kw" type="hidden" value="">
                                               <input name="cr" type="hidden" value="">
                                               <input name="searchstr" type="hidden" value="">
                                               <input name="lpurl" type="hidden" value="http://customers.mysite.com/ContactSalesWeb_test.html?cr={creative}&amp;kw={keyword}">
                                               <input name="formid" type="hidden" value="1024">
                                               <input name="returnURL" type="hidden" value="www.mysite.io">
                                               <input name="retURL" type="hidden" value="www.mysite.io">
                                               <input name="returnLPId" type="hidden" value="-1">
                                               <input name="_mkt_disp" type="hidden" value="return">
                                               <input name="_mkt_trk" type="hidden" value="http://customers.mysite.com/test.html?cr={creative}&kw={keyword}">
                                           </form>

                           And then, at the bottom, I have the new JS:

                                    <script src="//app-sj01.marketo.com/js/forms2/js/forms2.js"></script>
                                    <form id="mktoForm_1024"></form>
                                    <script type="text/javascript">
                                    MktoForms2.loadForm("//app-sj01.marketo.com", "882-OYR-915", 1024, function(form) {
                                            form.onSuccess(function(values, followUpUrl){
                                                form.getFormElem().hide();
                                                return false;
                                            });
                                    });
                                    </script>

                                But then there's also this JavaScript still being used...

                                         <script type="text/javascript">
                                           function formSubmit(elt) {
                                             var formSubmit = Mkto.formSubmit(elt);
                                             if (!formSubmit) {
                                               jQuery('span.mktFormSubmitError').show();
                                               return false;
                                             }
                                             return true;
                                           }
                                           function formReset(elt) {
                                             return Mkto.formReset(elt);
                                           }
                                         </script>


                                     Sorry for including all the code, but thought it would be faster to include it :-)

                                      

                      • Re: On form submit, replace form with "thank you" message
                        Hi Andrew,
                        did you test if it works? ;)

                        But normally 
                                 <script src="//app-sj01.marketo.com/js/forms2/js/forms2.js"></script>
                                 <form id="mktoForm_1024"></form>
                                 <script type="text/javascript">
                                 MktoForms2.loadForm("//app-sj01.marketo.com", "882-OYR-915", 1024, function(form) {
                                         form.onSuccess(function(values, followUpUrl){
                                             form.getFormElem().hide();
                                             return false;
                                         });
                                 });
                                 </script>

                             should be 


                        <script>MktoForms2.loadForm("///app-sj01.marketo.com", "882-OYR-915",1024, function(form){
                          //Add an onSuccess handler
                          form.onSuccess(function(values, followUpUrl){
                            //get the form's jQuery element and hide it
                            form.getFormElem().hide();
                            //return false to prevent the submission handler from taking the lead to the follow up url.
                            return false;
                          });
                        });</script>

                        • Re: On form submit, replace form with "thank you" message
                          Got it. So how would I tie this to the click event handler?

                          <a onclick='formSubmit(document.getElementById("mktForm_1024")); return false;' href="#" class="button">SUBMIT</a>

                          I commented out the existing script block containing the formSubmit method, so I'll need to somehow connect this click event to  Mkto.loadForm...
                          • Re: On form submit, replace form with "thank you" message
                            I had a similar issue. What I did was create a hidden DIV element with the "success message" I wanted to display somewhere on the page before or after the marketo SCRIPT and added a javascript line to make that DIV visible onSuccess.

                                 <script src="//app-sjg.marketo.com/js/forms2/js/forms2.js"></script><form id="mktoForm_nnnn"></form><script>MktoForms2.loadForm("//app-sjg.marketo.com", "nnn-xxx-nnn", nnnnn, function(form){
                                   //Add an onSuccess handler
                                   form.onSuccess(function(values, followUpUrl){
                                     //get the form's jQuery element and hide it
                                     form.getFormElem().hide();
                                     document.getElementById('confirmform').style.visibility = 'visible';
                                     //return false to prevent the submission handler from taking the lead to the follow up url.
                                     return false;
                                   });});</script>
                                 <div id="confirmform" style="visibility:hidden;"><p><strong>Thank you. Check your email for details on your request.</strong.</p></div>
                            • Re: On form submit, replace form with "thank you" message
                              Hi Derek - I realize this topic is old but hoping you are still subscribed to these posts. I found your previous reply helpful. Do you know how I could get the confirmation div to disappear after X amount of time (in my particular case I want to keep the form visible at all times and have the confirmation show up after submission for a few seconds, then disappear)? Thanks in advance!

                               
                              • Re: On form submit, replace form with "thank you" message
                                Matt Stone
                                I would check out this thread for options on hiding the div after a few seconds: http://stackoverflow.com/questions/820951/hide-div-after-a-few-seconds -- you would just start out with showing it first, then exectue the script in that link to hide it after a few seconds.
                                • Re: On form submit, replace form with "thank you" message
                                  Robb Barrett PRD

                                  Hi all -

                                   

                                  Sorry for necroposting, but I've been using this functionality on my page but it's not prefilling the form. Is there a setting I need to add to get the pre-fill? The page has it enabled.