Form file upload

 

If your site is on the Business 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.

Collecting files directly through a form on your site is great for acquiring:

  • Documents such as résumés, portfolios, 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

Adding file upload to your form

Make sure you’ve added a form onto your page. Then, drag and drop a file upload button from the add elements panel (A) →  forms section right inside your form.

Customizing file upload settings

As soon as you add the file upload input onto the canvas, you’ll see the “Upload file” button as well as a text note. The settings window will be open as well indicating that this is the default state.

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 add more than one file upload element in a form. The name will help you identify the submitted files in your submissions data.

Of course, you can choose to make the file upload required just 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 this 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.

Specify what type of files you want your site visitors to submit through your forms' file upload button.
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, .doc, .docx, .indd, .key, .numbers, .pps, .ppt, .pptx, .psd, .ods, .odt, .pages, .pdf, .txt, .xls, .xlsx
  • 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 files
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 allows uploading PDFs for a “Attach your résumé” button, another that accepts only images for a “Upload a headshot” button.

Customizing 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
Each of the four file upload  default, uploading, success, and error states.

Default state

The default state consists of:

  • the default upload button
  • a text block which shows the default message “Max file size 10MB.”

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

Customizing and styling the button

The button is the actual upload button that you can customize by editing the text and customizing the styling including replacing the icon. 

To edit the text, just double-click the button and replace the text. To style it, make sure you’ve selected the button element, 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.

To replace and style the button icon, just add a background image, then update its size and position.

Replace the default button icon by adding a background image. To maintain the default size and position of the icon, set the background hight or width to 20px, the position to 50% from top and 12 px from the left. Make sure that tiling is set to none.

If you simply want to hide the icon, add a background image and then hide it.

You can restore the default icon by deleting your custom background image.

Uploading state

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

Success state

The success state of the file upload contains:

  • A text block — this displays the name of the uploaded file and cannot be edited. However, you can change its styling.
  • An icon nested in a link block — this 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.

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.
You can also add a text block in the success state wrapper. This can say “File uploaded!” or "Success!"
You can also replace the delete icon (X) with another icon image or a text block — “delete file” for example. Just make sure to set the width value of the link block to “auto”.

The error state

The default error message 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.

Caution
The button that appears in the error state right above the error message is the same button from the default state. So, 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.

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.

You can always restore the default message for each error type. Just edit the error message and click "restore default".

Type image caption here (optional)

Managing 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 project settings.

If you’re the data controller of a project, you can also access and view submitted files of each project in project 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. You can clear storage by deleting submissions.
Privacy & security note
  • By default, only those logged into Webflow can access the uploaded files. To comply with GDPR requirements and other data protection regulations, the default security setting is set to require login to access files.
  • You can allow anyone with the link to access the files by toggling this option in project settings → forms.
Read next