How do I add a file upload to a Webflow form?

Confirm the plan, then put the button in the form

A file upload collects a document, an image, or another allowed file with the rest of the form. Webflow's file upload article says you can add the button when the site is on a Premium Site plan (or the legacy Business Site plan), an Ecommerce Plus Site plan, or an Ecommerce Advanced Site plan.

The page needs a form block first. Open the Add panel, find File upload under Forms, and drop it inside that form. If it lands outside the form, the button is not part of the submit. The canvas shows an Upload file button and a note, and the settings open on the default state.

A careers page is a clear case. The form asks for a name, an email, a resume, and an optional cover letter. That is two file buttons inside one form, not one button that takes both files.

Name the button and limit the type

Name each button. The name is how you recognize the file later, so Resume and Cover letter are more useful than two buttons that both say Upload file. You can mark a button required, the same way you require an email field.

By default, a visitor can send any supported type. Turn on Allow only specific file types when the form should be stricter. Choose Document, Image, or a custom list you type. File types are not case-sensitive. Each button still takes one file, up to 10MB.

One form can hold up to 20 file upload buttons, each with its own rule. Resume can allow a PDF. A headshot button can allow images. Webflow blocks some types for security, including executable and script files such as .exe, .bat, .sh, and .jar, plus archives such as .tar and .tar.gz.

Documents in the supported set include PDF, Word, text, and spreadsheet files. Images include JPG, PNG, GIF, SVG, and WebP. Custom types include common audio and video files, ZIP, and HEIC. If a visitor needs a format outside that list, the button will not accept it. Ask for a PDF or a ZIP of allowed files instead of inventing a new extension.

Check the four states a visitor sees

The button has four states: default, uploading, success, and error. The default state is the button plus a text note that reads Max file size 10MB. You can rewrite that note, delete it, or style it. Double-click the button text to rename the label. A class on the button changes its color, border, and type. The default icon follows the button's font color. Give the icon and the text their own classes if they should not match. You can delete the icon and drop in an image from Assets.

The success state shows the uploaded file name. That name cannot be rewritten, though you can style it. A small control lets the visitor remove the file before they submit. You can add a short line such as File uploaded in that state.

The error text in the Designer reads Upload failed. Max size for files is 10MB. The same state also covers a network problem, a damaged file, or a type the button does not allow. Select the error text to edit each message, and use Restore default if you want the original line back. The button sitting in the error state is the default button. Editing it there changes the original button too.

Open the file after the form is submitted

Publish the site and send a test with a small PDF named so you can find it, such as resume-test.pdf. Webflow includes the uploaded file as a URL in the notification email that goes to the addresses in your form notification settings. The same file is listed under Site settings, Forms, for that form.

By default, only a person logged into Webflow can open that URL. Someone who is not logged in cannot open it, even if they have the link. If a coworker without a Webflow login needs the file, or if you send uploads to another storage tool such as Zapier, turn Restrict uploaded file access off. That control is under Site settings, Apps & Integrations.

Storage for these files is free up to 10GB. After that, Webflow charges $0.50 per GB each month. The hard cap is 100GB. At that cap, form submissions are no longer collected, and the cap cannot be increased. Deleting submissions clears storage. Download any file you still need before you delete its row, because the URL is the copy Webflow is holding.

Example check: submit resume-test.pdf, open Site settings, Forms, and confirm the Resume row has a link. Download that PDF. Then try the same form with an 11MB file and with a .exe file. Both should fail, and the error text should tell the visitor why.