Show message and download file on form submit

[Charles_Sander1]

I've gotten caught in the middle of two opposing requests.

I have a form on a landing page. By request, I built it so that the end-user fills out the form and a pdf resource downloads immediately. (we also have an auto-reply email send to that person) This is done by setting "after form fill" to "external URL"

Separately: The landing page template has built into it a way to have the user stay on the page, and I can display a basic HTML message, including a link to whatever file.

My dillema is that I've got two sensible requests that I can't seem to easily do at the same time.

1 - QA wants me to display the "thank you message" because without it, it's a little disorienting. I could do this with a link to the pdf, but original requester doesn't want user to have to click a second time.

2 - The original requester wants the file to download immediately when they press submit, but then you're disoriented because there's no 'thank you' message displayed

I'm hoping I'm overlooking a way to do this without having to do a bunch of rebuilding on the landing page template. I know there's probably a way to do this with javascript, but I'm trying to avoid creating extra work or doing something disruptive to the template.

[Brooke_Bartos1]

Hi Charles,

What does your CTA button say? If something like "Begin Download" is acceptable by your organization, could you then change the waiting label on the button to say "Thank You" as the download initiates? Maybe that could keep both parties happy?

B

[Charles_Sander1]

Ah! There's an idea.. Right now it just says "get the eBook"

[SanfordWhiteman]

Seems like whether this will suffice depends on the size of the PDF. The more compact it is, the less time they'll have to see the button text change to something informative.  You could forcibly add a delay (like 1.5s) if you want to make sure they read the text before the page goes away.

MktoForms2.whenReady(function(form){
   var formEl = form.getFormElem()[0],
       submitEl = formEl.querySelector("button[type='submit']");
   form.onSubmit(function(form){
      // disable submit, prevent infinite loop 
      form.submittable(false);
      form.onSubmit();
      // enter the same waiting text as in Form Editor
      submitEl.innerHTML = "Preparing download…"; 
      submitEl.disabled = true;
      // wait 1.5s, allow form to post
      setTimeout(function(){
         form.submittable(true);
         form.submit();
      },1500);
   });
});