Show message and download file on form submit | Community
Skip to main content
Charles_Sander1
Charles_Sander1
Level 4
January 22, 2018
Question

Show message and download file on form submit

  • January 22, 2018
  • 1 reply
  • 4486 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Brooke_Bartos1
Brooke_Bartos1
Level 4
January 22, 2018

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
Charles_Sander1Author
Level 4
January 22, 2018

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

SanfordWhiteman
SanfordWhiteman
Level 10
January 22, 2018

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);
   });
   
});
    Terms & ConditionsAccessibility statement

    Loading footer...