Trigger download on form submit without opening new tab

Question

Hello,

I've been asked to figure out how to trigger the download of a file upon clicking the submit button of a form while also displaying a thank you message ... all without opening a new tab. I've read through a number of posts asking for similar help but I'm still at a loss. (I don't even know if this is possible within Marketo.)

I don't know javascript well; this is the best I could come up with: (This, of course, opens up a new tab)

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 = '{{my.URL}}';
    formEl.innerHTML = '<div style="width:280px;">{{my.Confirmation}}</div>';
    return false;
  });
});

Any help or guidance is greatly appreciated!

'; return false; }); }); Any help or guidance is greatly appreciated!

SanfordWhiteman · Accepted Answer

You can't force a download in all browsers: notably, it will not be possible in any version of Internet Explorer.

So you still have to fall back to a new window when necessary.

This will adjust to the best experience supported by the browser:

MktoForms2.whenReady(function(form) {   
  var formEl = form.getFormElem()[0]
  
  var downloadHelper = document.createElement("a"),
      forceDownloadSupported = (downloadHelper.download !== undefined);
   
  var thankYouWindow;   
  
  form.onSubmit(function(form) {
    if(!forceDownloadSupported) {
      thankYouWindow = window.open("");
    }
  });

  form.onSuccess(function(vals, formEditorThankYouURL) {
    downloadHelper.href  = "{{my.URL}}" || formEditorThankYouURL;     
   
    // though URLs don't technically have "filenames" we treat the last part of the path as one
    var downloadLastPathSegment;
    
    if(!forceDownloadSupported) {
       thankYouWindow.document.location = downloadHelper;
    } else {
       downloadLastPathSegment = downloadHelper.pathname.split("/").pop();
       downloadHelper.setAttribute("download",downloadLastPathSegment);
       document.body.appendChild(downloadHelper);
       downloadHelper.click();
    }
     
    // replace the innerHTML of the form — or anything else that suits you
    formEl.innerHTML = "<div style='width:280px;'>{{my.Confirmation}}</div>";
     
    return false;
  });
});

Do note that the Thank You URL (overridden by {{my.URL}} in your case — bit of a generic variable name I must say!) must be on the same origin as the Landing Page for the force-download feature to work. That is, it must be in your Design Studio assets.

"; return false; });}); Do note that the Thank You URL (overridden by {{my.URL}} in your case — bit of a generic variable name I must say!) must be on the same origin as the Landing Page for the force-download feature to work. That is, it must be in your Design Studio assets.

SanfordWhiteman · Answer

Please edit your post and highlight your code using the Syntax Highlighter, then we'll continue.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded