Most of the time we need a backend for your forms that filters all spam sends emails, notifies you, and integrates with all of your tools

Perfect for agencies, designers & developers building static sites and Webflow.

Webflow allows you to add file upload to their forms. However, their default email notifications do not allow you to view or download user files directly from the email. Instead, you have to login into Webflow dashboard and download the files from there.

What if you want to get the email notifications, and have everything, including link to download the files, in there?

Luckily, there’s a simple solution for that. By using Form-Data service, you can have your form backend manage form submissions for you, including file uploads.

Prerequisites
  • This feature make use of custom Javascript and CSS, for which you must have a Webflow paid account. Or, alternatively, that you download the HTML and host the website yourself.
  • This feature requires that you have a storage in Form-Data, for which you must have Form-Data paid account.
1. Setting up a form handler

Start off by setting up your form backend as explained here.

2. Add upload field

General documentation about file uploads can be found here. Below we’ll see how to implement it in Webflow site:

  1. Add another input field at the point where you want the upload button to appear
  2. Go to the field’s settings
  3. Add a custom attribute
  4. Name it role, and set the value to form-data-uploader
3. Add JS and CSS

Click the Webflow logo at the top-left corner of the editor and switch to Project Settings

  1. Switch to Custom Code tab

  2. In the Head Code paste the following link to the css file

    <link href="https://static.form-data.com/css/form-data-uploader.v1.css"
rel="stylesheet">

  3. Click Save Changes

  4. Scroll down to the Footer Code and paste the following js script tag

    <script src="https://static.form-data.com/js/form-data-uploader.v1.js"></script>

  5. Click Save Changes

  6. Publish your changes

4. Test your site

Go to your published site and check your form. You should see the form active with the file upload button.

5. Customize

You can customize the experience of file uploads. To do that, go to the editor, select the input field you’ve created in step 2, and just as before add more custom attributes. The full list of available customizations can be found in section 4 of this article.

That’s it!

You now have a form-handler that accepts file-uploads and sends you email notification whenever a visitor uploads a file