Open New Tab After Form Submission for Downloads

[Anonymous]

Hi! We are creating a new website and I'm having some trouble with the downloads / resources section. When a visitor fills in a form, they are redirected to the PDF file which is an external URL. This completely closes our website. I do not want this behavior since I want the visitor to stay on our website. What I was thinking is once a visitor submits a form, the PDF opens in a separate tab, but then there's no thank you message after clicking on submit. What's the best way to manage this?

[Anonymous]

Okay that makes sense. Do I just replace the form info in the below code?

MktoForms2.loadForm("//app-sj11.marketo.com", "433-ODK-889", 1133);

And do I need this code as well even though it is not a lightbox?

MktoForms2.lightbox(form).show();

On Mon, Mar 6, 2017 at 2:36 PM, Sanford Whiteman <

[SanfordWhiteman]

You don't replace the default embed code -- the MktoForms2.whenReady() call is in addition to the MktoForms2.loadForm() call.

Right, if you're not using a lightbox, you don't need the lightbox line.

[Anonymous]

I meant do I replace the following "//app-sj11.marketo.com", "433-ODK-889",

1133 in the *MktoForms2.loadForm section. It looks like that form info

pertains to the other persons form ID, correct.*

*Sorry for any confusion or to be a pain, but I am just trying to

understand this so I don't create any errors. I do appreciate your help.*

Kevin

On Mon, Mar 6, 2017 at 2:52 PM, Sanford Whiteman <

[SanfordWhiteman]

Oh, of course you use your own embed code with your own Munchkin ID et al.

[Anonymous]

I made the changes and that seemed to work, however, that code has added another form to the LP. Check it out: Landing Page 

I tried to clear the form assignment in the new landing page thinking that with the addition of the code, it would have the form appear, but that didn't work. So I added it back in and now there are two forms. Any suggestions to remove the top form which is the one that opens in the same window.

Thank you,

Kevin

[SanfordWhiteman]

You don't need to run loadForm() again. When you embed a named form element, loadForm() is inserted for you, so you only need to add the form behaviors (whenReady).

[Anonymous]

Okay that worked, however, when I clicked Download Now, it opens in a new window/tab but the PDF does not appear (and I have it set for external URL). It opens to our sites homepage. I am trying to get the PDF to open in a new window/tab.

And just to be clear, this is the line of code that I removed: 

MktoForms2.loadForm("//app-ab17.marketo.com", "004-KXL-870", 1058);

Thank you again for your help, Sanford.

Kevin

[SanfordWhiteman]

Sorry, the onSuccess function signature was wrong in the earlier posts and I didn't catch it. I updated it now. Should have been:

form.onSuccess(function(vals,followUpUrl) {

[Anonymous]

Thanks for this, Sanford! It worked wonderfully. I was wondering is there anything I can add to this code so that when they click submit they get taken to the new window but when they come back to the landing page the form isn't there any longer. Maybe in that box it says something along the lines Thank you for downloading!

Attached is a picture of what the form looks like once I submit and the PDF opens in a new tab.

[SanfordWhiteman]

Yes, check this past blog post: http://blog.teknkl.com/same-page-thank-you-text-with-marketo-forms-about-the-aliid/

[Anonymous]

Worked like a charm. Thank you so much. You are a lifesaver, Sanford!!

[Kim_Gandy1]

Sanford Whiteman, would you mind helping me plug in the correct code to this existing embed?

<script src="//app-sj11.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1133"></form>

<script>MktoForms2.loadForm("//app-sj11.marketo.com", "433-ODK-889", 1133); MktoForms2.whenReady(function(form){MktoForms2.lightbox(form).show(); form.onSuccess(function(followUpUrl){window.open('http.example.html','_blank' );});});</script>

[SanfordWhiteman]

  MktoForms2.loadForm("//app-sj11.marketo.com", "433-ODK-889", 1133);
  MktoForms2.whenReady(function(form) {
  
    var thankYouWindow;
  
    MktoForms2.lightbox(form).show();
  
    form.onSubmit(function(form) {
      thankYouWindow = window.open('');
    });

    form.onSuccess(function(vals,followUpUrl) {
      thankYouWindow.document.location = 'http.example.html';    
    });
  
  });

[shilohpaul]

Hi! I'm also trying to open in a new tab, but I'm passing through the URL of the page the form is on to determine the thank you URL (in this case the URL of the PDF). I'm trying to combine my original code with this to get the PDF to open in a new tab once it's passed through. 

Original Code:

<script src="//app-abxx.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_xxxx"></form>
<script>
MktoForms2.loadForm("//app-abxx.marketo.com", "801-JLS-xxx", xxxx,
    function(form) 
    {
        form.addHiddenFields({ previousURI : document.location.href })    
    });
</script>

I tried swapping the 'http.example.html' with the form.addHiddenFields({ previousURI : document.location.href }) but it didn't work (it did make the download button appear but not correctly and it broke the form logic). 

Any help would be appreciated! I'm still really new at Marketo and javascript.

[SanfordWhiteman]

Not sure exactly what you mean here, Shiloh.

Are you choosing the Thank You URL in Form Editor based on the previousURI value (using Advanced Thank You/Follow-Up)?

[shilohpaul]

Yes! So the code is working perfectly to send the user to the correct thank you page using previousURI once they submit the form. However, I can't figure out how to get that thank you page to open in a new tab. 

[shilohpaul]

Hi @SanfordWhiteman Did my reply above make sense?

I'm trying to essentially figure out how to combine the code for the global form redirect (based on previousURI) with the code to open the thank you page in a new tab.

You helped me with the global form redirect code and that's working perfectly! Now I'm just trying to figure out how to make that redirect open in a new tab.

[SanfordWhiteman]

  MktoForms2.loadForm("//app-sj11.marketo.com", "433-ODK-889", 1133);
  MktoForms2.whenReady(function(form) {
  
    var thankYouWindow;
  
    MktoForms2.lightbox(form).show();
  
    form.onSubmit(function(form) {
      form.addHiddenFields({
        previousURI : document.location.href      
      });    

      thankYouWindow = window.open('');
    });

    form.onSuccess(function(vals,followUpUrl) {
      thankYouWindow.document.location = 'http.example.html';    
    });
  
  });

[shilohpaul]

Thank you!

I'm not able to get the download button to work when onSuccess function is in there. I've tried deleting the onSuccess function, and then the button does work to send them to the PDF, but it doesn't open in a new tab. I also tried keeping the onSuccess function in there but using the previousURI variable rather than a string with the URL, but it's the same result as the URL string.

The lightbox also doesn't work for our site so I removed that - not sure if that could be causing the issue. 

[SanfordWhiteman]

You need to provide the URL of the page so I can see what else is going on.

[shilohpaul]

It's on our staging site here: https://stagingins2020.wpengine.com/featured-white-paper/the-power-of-identity/