Webflow 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.
Luckily, there's a simple remedy 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 Webflow paid account.
- This feature requires that you have a storage in Form-Data, for which you must have Form-Data paid account.
1. Setting up 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:
- Add another input field at the point where you want the upload button to appear
- Go to the field's settings
- Add a custom attribute
- 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_
- Switch to Custom Code tab
- 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">
- Click _Save Changes_
- 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>
- Click _Save Changes_
- 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.
