Open New Tab After Form Submission for Downloads

Highlighted
Anonymous
Not applicable

Open New Tab After Form Submission for Downloads

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?

35 REPLIES 35
Highlighted
Level 10 - Community Moderator

Re: Open New Tab After Form Submission for Downloads

  • 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

Highlighted
Anonymous
Not applicable

Re: Open New Tab After Form Submission for Downloads

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>

Highlighted
Level 10 - Community Moderator

Re: Open New Tab After Form Submission for Downloads

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?).

Highlighted
Level 5

Re: Open New Tab After Form Submission for Downloads

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>

Highlighted
Level 10 - Community Moderator

Re: Open New Tab After Form Submission for Downloads

  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';    

    });

  

  });

Highlighted
Anonymous
Not applicable

Re: Open New Tab After Form Submission for Downloads

Hi Sanford,

I also have added a form to a marketo landing page, which is being used off a template they created for us. When I attached the PDF url for the form submission (as external URL), it opens in the same window. I prefer the document open in either a new window/tab. How do you suggest I go about this? And if it's adding some code to the landing page, since it is a template, would that code be added in the "Custom HEAD HTML" section?

Thank you,

Kevin

Highlighted
Level 10 - Community Moderator

Re: Open New Tab After Form Submission for Downloads

It's same code as above, except you're using the form-level followUpUrl as is instead of overriding it in the code. Thus change:

form.onSuccess(function(vals,followUpUrl) { 

  thankYouWindow.document.location = 'http.example.html';      

});

to this:

form.onSuccess(function(vals,followUpUrl) { 

  thankYouWindow.document.location = followUpUrl;      

  return false;

});

You have to put the code block after the forms library is loaded. Thus in these cases the safest place to put the <script> is actually right before the closing <body> tag.

Highlighted
Anonymous
Not applicable

Re: Open New Tab After Form Submission for Downloads

Hi Sanford,

Thank you for the quick reply. Sorry for my ignorance (and the fact, I am

not a developer), but what code exactly that you mention above? Here is the

landing page url: http://lp.zilliant.com/AI_Delivers.html

The form lives on this LP, and since I am using a template, where exactly

am I placing the code? I don't have access to edit in the HTML unless I

update the main template code. Is this where you suggest this code be

placed? And if I do update in the main template, will that carry over to

the new LP I created using the main template? There is a Custom head HTML

section in the newly created LP settings.

Thank you,

Kevin

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

Highlighted
Level 10 - Community Moderator

Re: Open New Tab After Form Submission for Downloads

what code exactly that you mention above?

The code in the post right above yours in this thread.

The form lives on this LP, and since I am using a template, where exactly

am I placing the code? I don't have access to edit in the HTML unless I

update the main template code. Is this where you suggest this code be

placed? And if I do update in the main template, will that carry over to

the new LP I created using the main template? There is a Custom head HTML

section in the newly created LP settings.

You can put the code in the template, before the closing <BODY> tag. Note it will (by definition) apply to all LPs based on this template, after you reapprove them.

Custom <head> is the opposite of <body>.  You can put it in the <head> but then you need slightly more complex code.