Open New Tab After Form Submission for Downloads

Highlighted
Level 10 - Community Moderator

Re: Open New Tab After Form Submission for Downloads

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) {

Highlighted
Anonymous
Not applicable

Re: Open New Tab After Form Submission for Downloads

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

Highlighted
Anonymous
Not applicable

Re: Open New Tab After Form Submission for Downloads

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.

screenshot.png

Highlighted
Level 10 - Community Moderator

Re: Open New Tab After Form Submission for Downloads

Highlighted
Level 2

Re: Open New Tab After Form Submission for Downloads

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;

});

});

Highlighted
Level 10 - Community Moderator

Re: Open New Tab After Form Submission for Downloads

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:

pastedImage_2.png

Highlighted
Level 2

Re: Open New Tab After Form Submission for Downloads

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!

Highlighted
Level 2

Re: Open New Tab After Form Submission for Downloads

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

Level 2

Re: Open New Tab After Form Submission for Downloads

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;

});

});

Highlighted
Level 10 - Community Moderator

Re: Open New Tab After Form Submission for Downloads

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.