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.
- 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:
- 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
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.
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.
You now have a form-handler that accepts file-uploads and sends you email notification whenever a visitor uploads a file