Forms 2.0: iFrame follow-up script no longer works

[Dan_Stevens_]

Many of our Marketo forms are integrated into our website using iFrames.  Prior to Forms 2.0, we placed a small block of javascript code to enable the follow-up page to load in a full window (instead of within the iframe):

<script type="text/javascript" src="/js/public/jquery-latest.min.js"></script>
<script type="text/javascript">
    // set no conflict mode for jquery
  var $jQ = jQuery.noConflict();

  $jQ(document).ready(function(){
      // all form submits will open in a new window
    $jQ('.lpeRegForm').attr('target','_blank');
  });
</script>

I changed the bold line above to:
$jQ('.mktoForm').attr('target','_blank');
to reflect the new form <div> ID that's being used.  But this still isn't working.  Are there any others in this community that have deployed Forms 2.0 using iFrames and have gotten the follow-up page to open in a full window?

[Anonymous]

This is great. Is there any way to grab the URL you want the user redirected to from the hidden field values in the form? I don't want to have to edit this script on every landing page but would rather put it in the landing page template and specify the thank-you page when I drop the form on the landing page.

Since the form is now rendered using javascript, I'm not sure how/where to grab this value. When it was an actual hidden field (i.e. <input type="hidden" name="ret" value="url">) it was easy to grab.

Any info/thoughts are much appreciated.

-Damon

[Anonymous]

Thank you to Don for figuring this out!  If it helps anyone out, I added a line of code to figure out the form ID so I can reuse this without inputing the form number each time.  It just pulls it out of the hidden field where it is stored  here it is...

<script> 

  function setupFormSuccess (){

    var formID = $('[name="formid"]').val();

    var form = MktoForms2.getForm(formID);

    if(!form){

 setTimeout(setupFormSuccess, 500);

    }else{

      form.onSuccess(function (values, url){

        window.top.location.href = url;

        return false;

      });

    }

  }

  setupFormSuccess();

</script>

[Anonymous]

Thank you. This worked great!

[Anonymous]

Karen,

You are correct, you need to change that bold section and input the Form ID. The form ID can be found in a couple ways, but the way I always do it is to go to the form in Marketo, select it and look at the URL in your browser. You will need to get the number in the URL that follows "FO" and before the next alphabetical letter.

Example:

• Form url in MKTO: https://app-abb.marketo.com/#FO1237B2
• Form ID = 1237

Hope this is clear enough.

[Anonymous]

This is not working for me, but I suspect there's something I'm supposed to do with "update with form id", which is bold in the code, but I don't see anything here stating what I'm supposed to do. Does anyone know?

[Anonymous]

Anyone have any issues with IE re this script?  I had heard that there was a problem with cookies on IE with 2.0 and wondering it this is it.

The code works fine on Firefox and Chrome, but will when I clear cache and start a test process on IE (fill out the form, back click and check or hit another link and return) my custom 2.0 welcome back message does not appear, just an unfilled form.

The question for me is whether the cookie is failing or the Welcome Back message but either way it is unfortunate this will not behave on IE like it is on other browsers

[Anonymous]

Don (and the rest of the team that worked on this) thank you so much! I have been pulling my hair out over this for the last week and am so excited to have finally found this post. Wonderful news and fantastic work.

I was in the same boat as John W--looking at some incorrect solutions. Could not be happier for this post.

Cheers!

[Anonymous]

Just felt the need to thank Don for that code - was beating my head against my desk trying to figure it out using the code at https://community.marketo.com/MarketoResource?id=kA650000000GsRoCAK which doesn't work.

[Anonymous]

Second round is on me! Thank you!

[Dan_Stevens_]

Don - this is wonderful news (and yes, it does work as intended now).  In fact, I felt the need to start a new community discussion so that it gets the visibility that it deserves.  Thanks so much!!! 

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

P.S. - let me know if you'll be attending the Marketo Summit in April.  I owe you a couple of cold ones!!

[Anonymous]

Dan,

This is now resolved, I've updated your test page successfully.

Here's the code(place in a custom html block on the Marketo page) that should be used for iframing Mkto pages/forms .

 

<script> 

  function setupFormSuccess (){

    var form = MktoForms2.getForm(update with form id);

    if(!form){

      setTimeout(setupFormSuccess, 500);

    }else{

      form.onSuccess(function (values, url){

        window.top.location.href = url;

        return false;

      });

    }

  }

  setupFormSuccess();

</script>

[Anonymous]

Dan,

Jumping in here..Basically the form submit function has changed completely. The solution to make his work will require some new code. if you look on our developer site:

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

It's shows some new calls to make things happen, I've  requested our Pm and Eng look in to this feature and others that want to add custom scripts.

So far I've been testing with "form.onSuccess" , keep you posted...
I've been modifying this script not as an embed just the necessary parts in a html block :

//Add an onSuccess handler

  form.onSuccess(function(values, followUpUrl){

    //Take the lead to a different page on successful submit, ignoring the form's configured followUpUrl.

    location.href = "http://whatever.url.you.want/page.html";

    //return false to prevent the submission handler continuing with its own processing

    return false;

  });

Try

window.parent.location.href= "http://www.google.com";

 

[Dan_Stevens_]

There are some limitations with using the embed code, such as the inability to pre-fill the form fields.  And if I recall, you can't do progressive profiling.  I could be wrong though.

[Anonymous]

That's a shame. I had just submitted a ticket to try anyways. May I ask why you are using iframes still? We are because we like the ability to add design elements around our forms on the Marketo landing page and the embed doesn't allow us to do this.

[Dan_Stevens_]

Hi Chrissy.  Unfortunately, no.  Marketo Support is telling us this is our problem to figure out.  We have experienced web developers and javascript experts in-house and even they can't figure it out.  According to them, Marketo is using a bunch on non-traditional techniques within the code, making it very difficult for our team to diagnose.  I'm at a loss right now.  We were really looking forward to migrating all of our forms to the new Forms 2.0 framework.  It doesn't look like that's going to happen anytime soon.

[Anonymous]

Hi Dan- any progress with this? I am running into the same issue.

Thanks!

[Anonymous]

I've yet to put any Forms 2.0 into production yet until they work out the bugs. I'm handy enough with JS that they don't really do anything revolutionary for me at this point.

Call me a form luddite I guess 🙂

[Dan_Stevens_]

Hi Jason - were you able to get this to work with your implementation of the form within an iframe?

[Dan_Stevens_]

Jason, unfortunately, this did not work.  Appreciate the persistence though!  BTW, the form is on layer 15 and the custom HTML (javascript) is on layer 14.  Not sure if that has anything to do with it.

[Anonymous]

Try this, it identifies the first form in the code: 

$('.mktoForm').eq(0).attr('target','_top');