Thank You message not appearing in after Form submission in iFrame | Community
Skip to main content
A
Anonymous
May 31, 2017
Question

Thank You message not appearing in after Form submission in iFrame

  • May 31, 2017
  • 2 replies
  • 3330 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

SanfordWhiteman
SanfordWhiteman
Level 10
May 31, 2017

Please post a link to your LP.

A
Anonymous
May 31, 2017

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>
J
joeb44979627
Level 2
July 17, 2018

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.

Terms & ConditionsAccessibility statement

Loading footer...