Available on: Gold, Platinum plans
Formspree allows you to upload files to your form natively. File upload allows you to collect information that may not otherwise be expressed well in text-based HTML input fields.
For example, you may be using Formspree as a way for users to submit support tickets using Form Routing Rules to send a form to the right team. Users might find it easier to explain their problem with a screenshot, a perfect use for file uploads.
Getting Started
All HTML forms have a default attribute called enctype that we need to override. In the form declaration, we need to set enctype=multipart/form-data
.
Now we can add the file input field. There's a number of options we can add to this field to customize it with how we want. For example, if we only want to accept PNG and JPEG images, we can add accept="image/png, image/jpeg"
.
An example form using file uploads is below:
<form method="POST" action="https://formspree.io/YOUREMAILHERE" enctype="multipart/form-data">
<input type="email" name="email" placeholder="Your email">
<textarea name="message" placeholder="Details of your problem"></textarea>
<input type="file" name="attachment" accept="image/png, image/jpeg">
<button type="submit">Send Test</button>
</form>
Accessing Your Files
Files are included on the Formspree dashboard. On the submissions page of your form, you can download each file.
Each Formspree account has an account quota based on the plan you have. You can view the storage each form is taking up on your forms dashboard. If you start approaching the quota, we will send an email warning. Files uploaded that cause you to go over the limit will result in us deleting files, starting with the oldest first.
Troubleshooting
Legacy Formspree Gold and Platinum users don't have access to file uploads. You can update your plan on our plans page to gain access to file uploads and a number of other features. You can find out if you're in a legacy plan if there's a note at the top of the page saying "You're in a legacy plan".
Formspree does not support the multiple
attribute on a file input. If you want to submit multiple files, submit them independently with different file upload input fields.