Back to all lessons
Lesson library

Form file upload

Add a file upload button to your forms to collect documents, images, media files, and more from your visitors.

 
This video features an old UI. Updated version coming soon!

If your site is on the Business, Ecommerce Plus, or Ecommerce Advanced hosting tier, you can add a File upload button to your forms. This allows visitors to attach files to their form submissions, which you can automatically send to the site’s data controller. And of course, you can style the upload button and all its states to customize every step of the file upload experience.

The File upload button can help you collect: 

  • Documents such as résumés, portfolios, and applications through job application forms
  • Images and videos such as screenshots and screen-captures through customer support forms
  • Compressed files that, for example, contain images of a participant in a contest through a submission form

In this lesson:

  1. How to add File upload to your form
  2. How to customize File upload settings
  3. How to customize File upload states
  4. How to manage file submissions

Before you get started

Check out our intro to forms lesson to learn how you can create forms in Webflow. 

How to add File upload to your form

Make sure you’ve added a Form block element to your page. Then, drag and drop a File upload button from the Add panel (A) > Forms section right inside your Form.

File upload element highlighted in the Forms section of the Add panel.

How to customize File upload settings

As soon as you add the file upload input onto the canvas, the “Upload file” button will appear along with a text note. The settings window will also open to the File upload default state.

File upload element settings for the Default state of a File upload button.

Here, you can toggle between the 4 States of the file upload process. We’ll cover how to customize and style these below.

You can also Name the File upload button. This is helpful especially when you want to include more than one File upload button in a form (e.g., “Résumé” and “Cover Letter”). The name will help you identify the submitted files in your submissions data.

You can choose to make the file upload Required, like other form input elements. 

You can also choose to Allow only specific file types. This lets you restrict the type of files that people can submit through the button for that specific form.

Allowing only specific file types

By default, a user can submit any supported file type. However, you can restrict file types and choose whether the File upload button will allow users to submit a Document file, an Image file, or even custom file types you specify in the Custom text area input.

The “Allow only specific file types” option in File upload settings, where the “Custom” option is checked to allow only .pdf uploads. 

Supported file types for file upload

Each file upload button accepts a single file of up to 10MB in size of the following file formats:

  • Documents — .ai, .csv, .doc, .docx, .indd, .key, .numbers, .pps, .ppt, .pptx, .psd, .ods, .odt, .pages, .pdf, .txt, .xls, .xlsx, .odt, .ods, .odp
  • Images — .bmp, .dng, .eps, .gif, .jpg, .jpeg, .png, .ps, .raw, .svg, .tga, .tif, .tiff
  • Custom — Audio files (.m4a, .mid, .mp3, .mpa, .ogg, .wav, .wma), video files (.3gp, .avi, .flv, .m4v, .mov, .mp4, .mpg, .wmv), .zip

Unsupported file types for file upload

For security reasons, the following file types are not allowed: .apk, .app, .bat, .cgi, .com, .exe, .ps1, .gadget, .jar, .sh, .wsf, .tar, .tar.gz

Good to know: You can add up to 20 file upload buttons in each form and configure each one differently. For example, you can have one button that only accepts PDFs for an “Attach your résumé” button, and another that only accepts images for an “Upload a headshot” button.
Two File upload buttons on an example application form. One button is labeled “Upload résumé” while the other is labeled “Attach a headshot.”

How to customize File upload states

You have complete control over the look and feel of the file upload experience in all its different states:

  • Default — what the button looks like normally
  • Uploading — how the button looks during the uploading process
  • Success — how the button looks after the file’s been uploaded
  • Error — the message that will display if something goes wrong
The default state of the File upload button. The button reads, “Upload File,” and the message next to it reads, “Max file size 10MB.” 
The uploading state of the File upload button. The button reads, “Uploading…” and displays a small progress spinner.
The success state of the File upload button, which displays the name of the uploaded file next to an “X” button to remove the uploaded file.
The error state of the File upload button. It’s identical to the default state, except for the error message that appears beneath the button, which reads, “Upload failed. Max size for files is 10 MB.” 

Default state

The default state consists of:

  • the default upload button which contains an icon and a text block
  • a message text block which shows the default message “Max file size 10MB”
The default state of the File upload button. The button reads, “Upload File,” and the message next to it reads, “Max file size 10MB.” 

You can change the text of the message or even delete it entirely. You can also style it just like you would style any text block.

Customizing and styling the button

You can customize the upload button by editing the text, customizing the styling, and/or replacing the icon. 

To edit the text, double-click the button and replace the text. You can style the text individually or by applying the styling on the entire button.

To style the button, add a class and apply any styling you want in the Style panel. You can change the background color, the border, the font — the list goes on and on. By changing the font color of the button you also change the color of the default icon.

If you want a dark button, apply a white font color and a black background color to the button. The white font color is applied to the icon as well as the text.

If you don’t want the icon and text to share the same color, or if you want to style the icon and the text separately, add a separate class to each of these elements and apply different font colors to each.

Here, we've applied a font color on the icon itself. This styling has overridden the white font color applied on the button.

To replace the button’s icon, delete the default icon, then drag and drop the icon you want to use from your Asset panel.

An “Upload Résumé” File upload button containing a file icon image in place of the default “Upload” icon. 

To maintain the default size and left positioning of the icon, you can set the width or height of your image to 20 pixels and add a right margin of 8 pixels to create a gap between the icon and the text.

You can also reposition the default icon by dragging it inside the button.

File upload button with the “upload” icon placed to the right of the text which reads “Upload résumé.”
The Style panel of the Designer with the “upload” icon selected. Margin-left has been set to 8 pixels and margin-right has been set to 0 pixels. 

For icons on the right side of your button text, you can drag the icon to the right and modify the margins: 8 pixels on the left and 0 pixels on the right. Note that for custom images, you don't need to apply the 0 pixel right margin.

Uploading state

You can customize and style the button of the uploading state the same way you customize the button in the default state.

The uploading state of the File upload button. The button reads, “Uploading…” and displays a small progress spinner.

Success state

The success state of the file upload contains:

  • A text block — displays the name of the uploaded file and cannot be edited. However, you can change its styling.
  • An icon nested in a link block — allows a user to remove the uploaded file from their form. You can style this icon and its hover state.

You can style the whole button in the success state.

The success state of the File upload button, which displays the name of the uploaded file next to an “X” button to remove the uploaded file.

Design tips and suggestions

You can drag an image into the success state button. This image may be an icon indicating that the upload was successful. Or, it can be a placeholder file thumbnail icon.

The success state of the File upload button, which displays the name of the uploaded file to the right of a “file” icon.

You can also add a text block in the success state wrapper to display a message like “File uploaded!” or “Success!” 

The success state of the File upload button, which displays the name of the uploaded file. Beneath, there’s a message that reads, “Success!” 

Additionally, you can replace the delete icon (X) with another icon image or a text block — for example, one that says “delete file”. Just make sure to set the width value of the link block to “auto”.

The success state of the File upload button, which displays the name of the uploaded file next to the option to “delete file.”

The error state

The default error message that appears in the Designer reads: “Upload failed. Max size for files is 10MB.” However, the error state might also show for reasons other than when the file size is larger than 10MB. For example, there might be a network error or the uploaded file may be corrupted or has an invalid file extension. A different message will show up for each error type. Learn how you can customize these messages below.

The error message that appears beneath the File upload button reads, “Upload failed. Something went wrong. Please retry.”
Caution: The button that appears in the error state right above the error message is the same button from the default state. Editing the button here will replace the original button in the default state.

Customizing the error messages

You can replace the default text for all 3 error types. You can also change the text color or apply any other styling by selecting the Text block that is nested inside the error state wrapper.

To customize the error messages, select the error text block on the canvas, then you'll be able to access the Field error settings in the Settings panel. To edit each error message, click on the “pencil” icon that appears when you hover over the error type name.

Error message settings for various types of file upload issues: File size, Invalid file type, and Generic error. The “pencil” icon is highlighted to open the option to edit the error message associated with a file size error.

You can always restore the default message for each error type by editing the error message and clicking “Restore default”.

Settings modal menu for editing error message settings for the “File size” error message.

How to manage file submissions

When a user uploads and submits a file through one of your forms, the uploaded file will be included as a URL in your form submission notification that is emailed to the email address(es) you have specified in your Form notification settings in your Site settings.

If you’re the data controller of a site, you can also access and view submitted files of each site in Site settings > Forms > Form submission data.

Need to know: Form file upload storage is free up to 10GB, and $0.50/month per GB after that. We place a hard storage limit at 100GB, at which point form submissions will no longer be collected, and this limit cannot be increased. You can clear storage by deleting submissions

Important privacy & security note

By default, only users logged into Webflow can access files uploaded through a form. Meaning, a user that is not logged into Webflow won't be able to access the files even when they have the link to the files. You can allow anyone with the link to access the files by turning this option off in Site settings > Forms tab > Restrict uploaded file access.

Restrict uploaded file access setting within the Forms tab of Site settings. The setting is set to OFF, Login is not required.
Important: You’ll also need to turn this option off if you want to send your form file submissions to a different cloud storage provider using Zapier or another third-party integration.

Read next: Learn how to manage form submissions.

Try Webflow — it's free