2 Replies Latest reply on May 31, 2017 8:21 AM by Luis Florez

    Thank You message not appearing in after Form submission in iFrame

    Beth Blackburn

      I've crated a landing page with a Form inside of it.

      I am showing the landing page+form via an iFrame in a popup .

      The form shows up correctly and submits properly, but the Thank You message is never shown (still has the visibility=true inline style).

       

      I have 3 layers on my landing page.

      1. Header Graphic

      2. Form

      3. Thank You Message code:

      <script src="//app-ab13.marketo.com/js/forms2/js/forms2.min.js" type="text/javascript"></script>

      <script>

      MktoForms2.whenReady(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>

       

      Any clue as to why the Thank You message never appears?

        • Re: Thank You message not appearing in after Form submission in iFrame
          Luis Florez

          The code should work, so what about some troubleshooting like:

          1. Are you sure it is the only div with that ID? You cannot repeat IDs on HTML elements, so just making sure.
          2. Is the <div id="confirmform"> inside the LP you created? JavaScript cannot trigger for elements outside the iFrame
          3. Have you tried adding that code to the Embed snipped code:
          <form id="mktoForm_xxxx"></form>
          <script>
          MktoForms2.loadForm("//xxx.marketo.com", "xxxx", "xxxx" , function( form ){
                              form.onSuccess(function() {
                            document.getElementById('confirmform').style.visibility = 'visible';
                               document.getElementById('mktoForm_xxxx').style.visibility = 'hidden';
                                  return false;
                              });
                          
                      });
          </script>
          <div id="confirmform" style="visibility:hidden;"><p><strong>Thank you. Check your email for details on your request.</strong></p></div>