Form submission- button to submit AND file down


I have a form on my website to download a file that is attached to a CMS Collection item.
Currently, the user needs to fill out the form and hit the submit button, which takes them to the success message. When they reach the success message, I put another button that has the file attached because I was unable to do it with the submit button.

I would like for the submit button to also have the downloaded file, so the user just has to fill out the form, press submit and see the document in a new tab. I cannot put a redirect link because the form is in a template that pulls from a CMS collection list and the downloaded file changes based on the landing page.

Thank you!

You would need some third party form client for this. I would recommend looking in to Mailchimp then you could have the correct file be sent to the user via email based on their selection.

okay, I thought that might be the case!
thank you @felix_hellstrom

Yes, you can use the form redirect URL field to deliver the file immediately, but there are two issues-

  1. The form redirect URL does not have a CMS-binding feature, so you need to set it with a small piece of custom code
  2. When you store files in Webflow, you cannot control the mime type on delivery. That means that if you store files such as PDFs, most browsers will try to display them instead of download them.

If you want to force download of browser-displayable file types, you’ll need to host them somewhere else like Google Drive.

There’s a demo of both approaches in this cloneable about halfway down the page, and the source is in the codepen at the bottom of the page.

And if you store your files in Google Drive, here are some notes on the URL format to use.

Yea, this is totally doable. In fact I have a tutorial that does something similar:

But that screencast goes far beyond what you’re asking for, though it has some good examples for you in it.

How this would work for you is to use a free Make (Integromat) account.

Option 1

  1. User submits native Webflow form to Make.
  2. Make grabs the file link from the CMS.
  3. Make delivers this to the user in the response (it’s either displayed to screen or downloaded).

The biggest issue is knowing which CMS item to grab the link from. You’ll need to make the CMS item id available and stuff that into a hidden form field.

When the form is submitted Make can grab it from the Webflow CMS.

Option 2

If you’re on a CMS collection page when submitting the form, you can even stuff that url into a hidden field.

It would look like this:

  1. User submits native Webflow form to Make.
  2. Make delivers this to the user in the response (it’s either displayed to screen or downloaded).

You add Make to the mix because it gives you easy control of responding to the form submission, with the easiest control on your end.

Option 3

The approach mentioned by @felix_hellstrom (using an email provider to email the link) will also make your life simpler.

  1. User submits native Webflow form email provider.
  2. Form submit includes hidden form filed with URL.
  3. Email provider sends email with that URL.
  4. User clicks and downloads or displays it in the browser.

“…and see the document in a new tab.”

If you punt on that requirement it makes life a bit easier, though this is possible too.

These will be your easiest approaches.

Hope that helps!