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?

[SanfordWhiteman]

• In the form's onSubmit listener, open a new window.
• In the form's onSuccess, set the new window's location to the PDF.
• Do whatever you want in the original window.

Demo: MktoForms2 :: Thank You New Window

[Anonymous]

Thanks for your reply and pardon my ignorance, but do I just paste those codes after the original script ? What's the purpose of  Email: 'jtestoro@vaneckdemos.com'? Should the link to the PDF be an external link on the form settings?

Here's how my codes look:

<script>// <![CDATA[

MktoForms2.loadForm("//app-e.marketo.com", "846-WED-421", 1469);

// ]]></script>

<script>

MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 333);

MktoForms2.whenReady(function(form) {

  var formEl = form.getFormElem()[0],

  thankYouWindow;

  form.onSubmit(function(form) {

  thankYouWindow = window.open('');

  /* force demo values on CodePen */

  form.setValues({

  Email: 'jtestoro@vaneckdemos.com'

  });

  });

  form.onSuccess(function(vals, thankYouURL) {

  thankYouWindow.document.location = thankYouURL;

  formEl.innerHTML = 'Thank you! Your PDF will download in a new window.';

  return false;

  });

});

</script>

[SanfordWhiteman]

You definitely do not want the demo email address, and you don't want to load the demo form!  Do not include:

  MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 333);

nor

  form.setValues({

  Email: 'jtestoro@vaneckdemos.com'

  });

  });

Should the link to the PDF be an external link on the form settings?

Yes, the PDF is the Thank You/Follow Up URL (isn't that how you already had it?).

[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.