Do you want to allow users to add file attachments to your WordPress contact forms? Giving users the ability to upload files and media to your WordPress forms can make it easier for you to collect the information you need.
In this article, we’ll show you how to create a file upload form in WordPress.
If you don’t like the video, or need more instructions, please keep reading.
Why Use a File Upload Feature on Your WordPress Forms?
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.
This way, you’ll have all the information you need submitted at once, with no need to retrieve files from your site visitors at another time.
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.
- 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.
And this is just the beginning.
Luckily, WPForms makes it easy for your site visitors to upload the following file types to your contact forms:
- Images like .png, .gif, and .jpg
- Documents like .doc, .xls, .ppt, and .pdf
- Audio like .wav, .mp3, and .mp4
- Video like .mpg, .mov, and .wmv
Now let’s see how to add the file upload feature to your WordPress contact form.
Step 1: Create a Simple Contact Form in WordPress
Next, go to WPForms » Add New to create a new form.
On the setup screen, name your form and select the template you want to use, depending on the type of form you’re creating.
For our example, we’ll choose the Simple Contact Form template.
WPForms will create a simple contact form.
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 simple contact form template, you’ll already have the Name, Email, and Comment or Message form 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.
Step 2: Add the File Upload Feature
To let site visitors upload files to your newly created contact form, you’ll need to add the File Upload form field to your form.
Remember, you can do this 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.
The new form field will look like this:
You can click on the form field and change the:
- Label. Label the form field so your site visitors know what it’s for.
- Description. Add a description to your form field explaining specifics to users. For example, if you only want people to upload their resumes, 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 users to upload a file before they can submit their form, select this checkbox.
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 appropriate checkbox.
Step 3: Enable Conditional Logic on Your File Upload Form
Lastly, you can enable smart conditional logic to create clutter free forms if you want.
With WPForms’ smart conditional logic, you can show or hide fields based on the options a user inputs. All you have to do is click on Enable conditional logic and customize the rules.
This makes the form look more organized and helps fight form fatigue, which can help boost form conversions. It also makes sure you only request a file upload from a user that wants to upload a file.
For help with this step, check out our helpful documentation on how to use conditional logic with WPForms.
Once you are done customizing your form, click Save.
Now you’re ready to configure your form’s settings.
Step 4: Configure 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.
When you’re done, click Save.
Step 5: Configure Your File Upload Form’s Notifications
Notifications are a great way to send an email whenever a form is submitted on your website.
In fact, unless you disable this feature, whenever someone submits a contact form on your site, you’ll get a notification about the submission, whether they have uploaded a file or not.
If you use smart tags, you can also send a notification to the user when they submit a form, letting them know you received it and will be in contact shortly. This assures site visitors their form has gone through properly, along with their file upload.
For help with this step, check out our documentation on how to set up form notifications in WordPress.
Adding to this, if you want to keep branding across your emails consistent, you can check out this guide on adding a custom header to your email template.
Note: Since file attachments can often hurt email deliverability, currently we don’t attach files in emails. For example, if an email provider only allows a maximum of 10MB attachment but the user uploads a file size higher than 10MB, the email won’t be delivered. Instead, we send the file uploads via email as links.
Step 6: Configure Your File Upload Form’s Confirmations
Form confirmations are messages that display to site visitors once they submit a form on your website. They let people know that their form has been processed, along with their file upload, and offer you the chance to let them know what the next steps are.
WPForms has three confirmation types to choose from:
- Message. This is the default confirmation type in WPForms. When a site visitor submits a form, a simple message confirmation will appear letting them know their form was processed. Look here for some great success messages to help boost customer happiness.
- Show Page. This confirmation type will take site visitors to a specific web page on your site thanking them for their form submission. For help doing this, check out our tutorial on redirecting customers to a thank you page. In addition, be sure to check out our article on creating effective Thank You pages for boosting customer loyalty.
- Go to URL (Redirect). This option is used when you want to send site visitors to a different website.
Let’s see how to set up a simple form confirmation in WPForms so you can customize the 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.
For help with other confirmation types, see out documentation on setting up form confirmations.
Now you’re ready to add your contact form to your website.
Step 7: Add Your File Upload Form to Your Website
After you’ve created your form, complete with the file upload feature, you need to add it to your WordPress website.
WPForms allows you to add your forms to many locations on your website, including your blog posts, pages, and even sidebar widgets.
Let’s take a look at the most common post/page embed option.
To start, create a new post or page in WordPress and then click on the Add Form button.
Next, select your contact form in the modal popup and click Add Form.
Then, publish your post or page so your contact form will appear on your website.
Step 8: View Uploaded Files in Form Entries
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 save it or click to view it in your browser.
Better yet, 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.
And 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.