Thank You message not appearing in after Form submission in iFrame

Anonymous
Not applicable

Thank You message not appearing in after Form submission in iFrame

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?

Tags (2)
3 REPLIES 3
SanfordWhiteman
Level 10 - Community Moderator

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

Please post a link to your LP.

Anonymous
Not applicable

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

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>

Joe_Barrett
Level 2

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

This question seems "unanswered" still, but you provided an excellent script that works for pages with 2 or more forms on the same page. Thanks! But I prefer,

.style.display = 'none';

to clear up the space that was used by the form.