Want to let your website visitors upload file attachments to your WordPress forms?
Giving users the ability to add files and media to your site’s forms can make it way easier for you to collect the information you need.
In this article, we’ll show you how to easily create a file upload form in WordPress.
If you don’t like watching videos, or need more instructions, check out our step by step tutorial below.
Here’s a table of contents for easy navigation of each step:
- Create Your File Upload Form in WordPress
- Allow Multiple File Uploads (Optional)
- Customize Your File Upload Form Settings
- Configure Your File Upload Form’s Notifications
- Configure Your File Upload Form’s Confirmations
- Add Your File Upload Form to Your Website
- View The Files
Why Use a File Upload Feature on Your WordPress Forms?
Depending on the type of information you want to collect on your form, using a file upload feature is one of the best ways to make it easier for you to get more info from your users quicker. Making forms easier to fill out helps reduce your form abandonment rate so your site can generate more revenue.
You might need to add a file upload feature to your WordPress forms so you can collect different types of files and media from site visitors as they submit their form to you.
Here are some of the most common times you might want to allow users to upload a file through your contact form:
- Job application forms so applicants can attach their resume files
- Pictures as image files for a contest or a giveaway
- User submitted content forms so users can attach a blog post or image they want to share
- Client services forms so clients can attach their spreadsheet or project spec document
- Customer support forms so customers can attach documents to provide additional information
- Audio clips for you to play back during your podcast
- User-submitted videos on an event registration form so you have content to play at your event (great for weddings, anniversaries, and fundraisers.)
And this is just the beginning.
Luckily, the WPForms plugin makes it easy for your site visitors to upload the following file types to your contact forms:
- Documents (.doc, .xls, .ppt, and .pdf)
- Images (.png, .gif, and .jpg)
- Video (.mpg, .mov, and .wmv)
- Audio (.wav, .mp3, and .mp4)
Now let’s see how to add the file upload feature to your WordPress contact form.
Step 1: Create Your File Upload Form in WordPress
Next, go to WPForms » Add New to create a new form.
Now, on the setup screen, name your form. Next, scroll down to the Additional Templates section and type “File Upload Form”, then click on it to open the template.
Make sure you’ve already activated the Form Templates Pack Addon to search for this form.
Now, WPForms will now populate a pre-built File Upload Form and display the drag and drop builder.
Here, you can add additional fields to your contact form by dragging them from the left hand panel to the right hand panel.
With the File Upload Form template, you’ll already have the Name, Email, Phone, File Upload, and Additional Comments fields.
Click on any of the form fields to make changes. You can also click on a form field and drag it to rearrange the order on your contact form.
You can also add the File Upload field to any WordPress form you create. Just drag the File Upload form field, found under Fancy Fields, from the left hand panel of the Form Editor to the right hand panel.
You can click on the File Upload field and change the:
- Label — Name the form field so your site visitors know what it’s for.
- Description — Add a description explaining details to users. For example, if you only want people to upload an image, tell them that.
- Allowed File Extensions — If you want to restrict the types of files that can be uploaded to your WordPress form, put them here, each separated by a comma
- Max File Size — Specify, in megabytes, the max size file you’ll allow users to upload. If you leave this blank, WPForms will allow a max of 128MB.
- Required — If you want to require that users upload a file before they can submit their form, select this checkbox.
Wondering where these file uploads will be stored?
By default, all files uploaded by users are stored in the WPForms folder inside the Uploads directory of your site. To make things easier, you can also store these files in your WordPress Media Library by selecting the Store field in WordPress Media Library checkbox under Advanced Options.
Each file upload field allows users to upload one single file. To learn how to add multiple file uploads, read on. If just one file upload field works for you, you can skip the next step.
Step 2: Allow Multiple File Uploads (Optional)
You can add as many File Upload fields to your form as you want. To add multiple File Upload fields to your form, drag the field from the left hand panel onto your form.
But let’s say you want to add a bunch of File Upload fields — things might start to look a little cluttered.
To make your form appear clutter free, you’ll want to enable conditional logic on the first File Upload field before you add those other fields. That way, those extra File Upload fields won’t show up on your form unless a user needs them.
This trick makes the form look more organized and helps fight form fatigue, which can help boost form conversions.
To do this, drag a Dropdown field from the left-hand panel to your form, just above the file upload field. (This will work with any number of Upload File fields, but for the sake of this example we’ll do 3.)
Now click on the dropdown field to see the Field Options on the left panel and edit the Dropdown field label to say Number of Files to Upload and the Choices to say 1, 2, and 3.
After that, click on the File Upload field and in the options, scroll down to and expand the Conditionals tab in the left-hand panel. Then, select the checkmark for Enable conditional logic.
Customize the conditional logic of the File Upload field just like the screenshot below:
Keep in mind that new fields are added by clicking the Add new group button, which applies the OR logic. If you need more details about using the OR logic, read our guide on how to use And OR conditional logic.
The next step is to duplicate this File Upload field.
On your form, click on the duplicate icon on the right-hand side of the File Upload field.
In the left-hand panel, change the label of the new File Upload field to Upload Your Second File.
Now configure the conditional logic for this new field just like the screenshot below. The only change from the above step is that we removed the first action where it says the Number of Files to Upload is 1.
Now, duplicate the 2nd file upload field by clicking the icon and changing the label to Upload Your Third File.
Configure the conditional logic field just like the screenshot below. We’ll only keep the last field where it says the Number of Files to Upload is 3.
Once you are done customizing your form, click Save in the top right corner of your screen. You’ve just added multiple file upload fields to your form.
So now that you have the right amount of file upload fields on your form (be it just 1 or multiple), you’re ready to configure your form’s settings.
Step 3: Customize Your File Upload Form Settings
To start, go to Settings » General.
Here you can configure the following:
- Form Name — Rename your form here if you want to.
- Form Description — Give your form a description.
- Submit Button Text — Customize the copy on the submit button.
- Spam Prevention — Enable the anti-spam honeypot feature to prevent spambot submissions. This feature is automatically enabled on all WordPress forms. If you decide to use another form of spam prevention, unclick this option.
- GDPR Enhancements — You can disable the storing of entry information and user details, such as IP addresses and user agents, in an effort to comply with GDPR requirements. In addition, check out our step by step instructions on how to add a GDPR agreement field to your simple contact form.
And when you’re done, click Save.
Step 4: Configure Your File Upload Form’s Notifications
Notifications are an excellent way to know when someone submits one of your file upload forms.
And, unless you disable the notification feature, you’ll get an email notification whenever someone submits a form on your site.
To get an email message when someone completes your form, you’ll need to set up form notifications in WordPress and provide your email address.
Also, if you use smart tags, you can send a personalized notification to your site visitors once they finish your form to let them know you received it. This assures users their form has gone through properly, along with their file upload.
For more on this, check out our step by step guide on how to send multiple form notifications in WordPress.
In addition, you have the option to easily brand your notification emails by adding your logo or any image you choose in the custom header image area. The logo/image you choose will show up at the top of email notifications like the WPForms logo below.
Note: Since file attachments can often hurt email deliverability, WPForms doesn’t attach your user’s files in notification emails. Instead, we send the file uploads via email as links.
Step 5: Configure Your File Upload Form’s Confirmations
Form confirmations are ways to take action immediately (and automatically) after your user has submitted information to your form. For extra help with this step, check out our tutorial on how to setup form confirmations.
There are 3 different kinds of confirmations in WPForms:
- Message — This is the default confirmation type that appears after someone hits submit on your form, and it’s customizable. Check out our tips on ways to customize your confirmation message to boost your site visitors’ happiness.
- Display Page — Automatically send users to any page on your site like a thank you page
- Redirect — Useful if you want to take the user to a different website or specialized URL for more complex development.
So let’s see how to set up a simple form confirmation in WPForms so you can customize the success message site visitors will see when they submit a form on your site.
To start, click on the Confirmation tab in the Form Editor under Settings.
Next, select the type of confirmation type you’d like to create. For this example, we’ll select Message.
Then, customize the confirmation message to your liking and click Save when you’re done.
Now you’re ready to add your contact form to your website.
Step 6: Add Your File Upload Form to Your Website
After you’ve created your form, you need to add it to your WordPress website.
WPForms lets you add your forms to multiple places on your website including your pages, blog posts, and sidebar widgets.
Let’s take a look at the most common placement option: page/post embedding.
To begin, create a new page or post in WordPress, or go to the update settings on an existing one. After that, click inside the first block (the blank area below your page title) and click on the Add WPForms icon.
The WPForms widget will appear inside of your block. Click on the WPForms dropdown and pick the forms you’ve already created that you want to insert into your page. Select your file upload form.
Next, click on the blue button in the top right that says either Publish or Update, so your form will appear on your website.
That’s it! Your file upload form is now on your website.
Step 7: View The Files
WPForms stores each form submission as an entry. To view uploaded files, go to WPForms » Entries.
From there, select the right form from the dropdown menu and click on View.
Right click the file to download the file, or click to view it in your browser.
Better yet, you can use our Zapier addon, to automatically save all file uploads to:
And there you have it! You now know how to create a file upload form in WordPress.
If you want to allow site visitors to upload files directly to your website, be sure to check out our helpful guide on how to create a file upload widget in WordPress.
So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.