Show message and download file on form submit

Charles_Sander1
Level 4

Show message and download file on form submit

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.

3 REPLIES 3
Brooke_Bartos1
Level 6 - Champion

Re: Show message and download file on form submit

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
Level 4

Re: Show message and download file on form submit

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

SanfordWhiteman
Level 10 - Community Moderator

Re: Show message and download file on form submit

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

   });

  

});