For large attachments or multiple file uploads, use our advanced file uploader.
Heads Up! This is a PRO feature. You must have an active subscription to use this feature.
Our Default HTML5 File Uploader only supports file attachments up to 5 MB. Also currently it does not support multiple files. If you need to upload large files or multiple files, use our advanced file uploader.
Step 1: Add a File input inside your form with `data-advanced` attribute
<form> ... <! -- Step 1: Add this line --> <inputtype="file"data-advanced="true"name="attachment" /> ...</form>
Step 2: Add the following script before the closing of </body>
<! -- Step 2: Add the Web3Forms script --><scriptsrc="https://web3forms.com/client/script.js"asyncdefer></script>
Advanced Options
You can configure some options in the advanced uploader like multiple, accept types, max file size etc. See below:
<inputtype="file"name="attachment"data-advanced="true"(enableadvancedfileupload)accept="image/*, application/pdf"(acceptonlysomefiletypes)data-max-files="3"(Totalnumberoffilesallowed)data-max-file-size="5MB"(Maximumfilesizeforsingleitem)data-content="Drag & Drop or <i>Browse<i>"(CustomLabelinyourlanguage) />
Live Demo on Codepen
Coming soon!
Example Code
<formaction="https://api.web3forms.com/submit"method="POST"> <inputtype="hidden"name="access_key"value="YOUR_ACCESS_KEY_HERE"> <inputtype="text"name="name"required> <inputtype="email"name="email"required> <textareaname="message"required></textarea> <! -- Step 1: Add this line (showing advanced options) --> <inputtype="file"name="attachment"data-advanced="true"multipledata-max-file-size="3MB"data-max-files="3" /> <buttontype="submit">Submit Form</button></form><! -- Step 2: Add the script --><scriptsrc="https://web3forms.com/client/script.js"asyncdefer></script>
If you add just two lines to your contact form, you will get an advanced file upload form.
Note: You do not need to use multipart/form-data if you are using our advanced file uploader. You can use the normal method.
Styling & Theme
You can set your own theme & style as you wish by overwriting the class names provided by filepond. Here's how a dark theme would look like:
<!-- Dark Theme --><style>.filepond--panel-root {background-color:#2c2c2c; }.filepond--drop-label {color:#d4d4d4; }</style>
Client Side Validation
Use this snippet to make the file upload field required and to validate if the file is uploaded or not.
Add the following code block just above the closing of </body> and make sure YOUR_FORM_ID is updated with your form id.