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

[Jon_Wright]

Hi Sanford Whiteman​ - when I change the url in the codepen example to a PDF it doesn't load, it opens a new tab with the PDF url but there is just a white screen. This is only in Chrome. Seems to work fine in FF. Any ideas?

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('');
});
form.onSuccess(function(vals, thankYouURL) {
thankYouWindow.document.location = 'https://info.tmforum.org/rs/021-WLD-815/images/dtw-2019-event-brochure.pdf';
formEl.innerHTML = 'Thank you! Your asset has opened or downloaded in a new window.';
return false;
});
});

[SanfordWhiteman]

Have you turned off the Chrome viewer or have some other plugin interfering? The easy test is to open a new tab manually and put that PDF URL in the location bar. The behavior should be exactly the same as when the form opens the tab.

[Jon_Wright]

Thanks Sanford. I've checked and:

'Download PDF files instead of automatically opening them in Chrome' is Off

The PDF loads if I manually put it into a new tab

PDF doesn't load if I refresh the page the JS opened

Although the issue only seems to be occurring in CodePen on Chrome - running Version 73.0.3683.75 (Official Build) (64-bit). It does work if I add it to a Marketo LP, which I guess is good enough for me. But strange it's not working in CodePen.

[SanfordWhiteman]

See video of CodePen demo on Chrome 73 x64/Windows 10: CrossBrowserTesting Video Recording

[Jon_Wright]

Thanks for the tips, Sanford. But still doesn't seem to be working, but I'm guessing it must be something local to my machine: Video recording​

[SanfordWhiteman]

How could it be local to your machine if it's happening on CodePen using the CBT lab?

[Jon_Wright]

I thought maybe one of my browser settings? Do you think it's a CodePen setting?

[SanfordWhiteman]

Test the "debug" mode on CodePen, not "full": https://codepen.io/jwright_tmf/debug/oVPVWE

[Jon_Wright]

Yep, that works.

[SanfordWhiteman]

It was just an IFRAME-in-IFRAME security thing, then. Debug doesn't use an extra frame.

[SanfordWhiteman]

Are you running it from the debug CodePen (change /run/ in the UTL to /debug/)?

[Tim_Marcacci]

Hi Sanford,

I've tested your code from the codepen example you provided, and it works perfectly. Is there a way however to style the text that replaces the form?

Thanks!

[Tim_Marcacci]

Nevermind. I was able to find that I can use <span> tags to style accordingly.

[Anonymous]

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

[SanfordWhiteman]

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.

[Jim_McLemore]

Sanford Whiteman​,

We are trying to add this to a thank you page.  Purpose - We created a thank you page with a bunch of assets. We want to track each asset view as a new form submitted. I created a form with all hidden fields and just a button that redirects to the asset.  We would like the button (form submit) to open up in a new window.

The code we've implemented seems to be opening a new window AND redirecting the existing page, so that it is now open in two windows.  Below is the code we are trying to use.

Any edits we need to make to allow the current page to stay on the same page and the new page to open in a new tab/window?

MktoForms2.whenReady(function(form) {
var formEl = form.getFormElem()[0],
thankYouWindow;
form.onSubmit(function(form) {
thankYouWindow = window.open('');
});
form.onSuccess(function(vals,followUpUrl) {
thankYouWindow.document.location = followUpUrl;
return false;
});
});

[SanfordWhiteman]

That JS on its own should work fine. Are you sure you don't have additional form behaviors code (another onSuccess listener) running? This code properly avoids the same-page redirect but another listener could contradict it.

Also, please go back and edit the code in your post and highlight it as JavaScript using the Advanced Editor's Syntax Highlighter:

[Anonymous]

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 <

[SanfordWhiteman]

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.