WPForms Blog

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

File Upload Form for WordPress

How to Create a File Upload Form in WordPress

by Courtney Robertson on Jun 8, 2016

Do you want to allow users to add file attachments to your contact form? Giving users the ability to upload a file in your WordPress forms can make it easier for you to collect the information you need. In this article, we will show you how to add file upload to your WordPress forms.

When Do You Need File Upload Forms

There are a lot of uses cases where you may want to allow users to upload a file through your contact form.

Some potential use cases are:

  • Job application forms where you need applications to attach their resume files.
  • User submitted content forms where you want the users to attach their blog post or image they want to share.
  • Client services form where you want the client to attach their spreadsheet or project spec document.
  • Customer support form where you want the customer to be able to attach documents to provide additional information.

And I’m sure you can find tons of other use cases as well.

Whether you want users to upload a .doc file, .xls or .csv file, an image file, a PDF file, or even an audio / movie file, we’ll show you how you can add a file upload form that accepts both small and large files.

Note: For WordPress security reasons, the file types that can be uploaded are limited. Here’s how to allow additional file upload types.

Adding a File Upload Form in WordPress

The first thing you need to do is install and activate the WPForms plugin. Here’s a step by step guide on how to install a WordPress plugin.

Once you have activated the plugin, let’s go ahead and create a new form.

You can do this by going to WPForms » Add New.

On the next screen, you need enter your form name and select from one of our pre-built form templates or start with a blank form.  For this tutorial, we will begin with a blank form.

New Blank Form

In the form builder, simply drag & drop the fields you want from the left column.

We have chosen the Name, Email, Paragraph Text, and File Upload field. You can click on each field to customize the settings.

File Upload

To rearrange the fields, hover your mouse on the far right side and simply drag to reorder.

WordPress Contact Form File Upload

Once you are done customizing the field, click on the Save button to make sure that your changes are saved.

After this, you need to configure the form notification and confirmation settings.

File Upload Form Settings

You can configure the form settings by click on the Settings tab.

You’ll see the General Settings as well as Notification and Confirmation settings.

The general settings area is fairly self-explanatory, so we will skip to the notification settings.

When you click on the Notifications tab, you can modify the email notification that you will get when a user submits a form. The default settings sends the site admin an email every time someone submits a form. You can customize the settings as needed.

WPForms Email Notifications

Next is the Confirmation setting. This is what the user sees after they submit their form.

WordPress Document Upload Plugin Confirmation

You have the option to show them a thank you message, redirect them to a WordPress page, or redirect them to a completely different page.

How to Embed a File Upload Form

WPForms give you two different ways to embed your file upload form into your site.

When you’re done editing the form, click on the Embed button on the top right. It will show you a shortcode along with a video. You need to copy the shortcode provided.

After that go the Post or Page that you want to add the form to and simply paste the shortcode.

embed upload form

The second option is to click Add Form within the Post or Page editor. This will result in the shortcode inside the post as well.

Adding a file upload form to a WordPress post via a button

Simply publish the page to see your form live on the website.

Here’s what our form looked like on the default WordPress theme.

View Your File Upload Form

View the Uploaded Files in Form Entries

WPForms stores each form submission as an entry. To view the uploaded documents, you need to go to WPForms » Entries. From there select “View” to see the form entry.

View WPForms Entries

Now you can right click to save the uploaded document or click to view it in your browser. Using our Zapier addon, you could even automatically save all uploads to Google Drive, Dropbox, or other cloud storage services.

That’s all. We hope this article has helped you learn how to create a file upload form in WordPress. What are you waiting for? Get started with the most powerful WordPress forms plugin today.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Comments

    1. Uploaded files are linked to in the email notifications. So when you view the notification, it will have a direct link to the file(s). However we don’t include the actual file as an attachment in the emails.

      Multiple file support is something that is on our radar and we hope to add in the future 🙂

  1. Hello, I hope there’s still someone out there to help me. I’ve been able to make use of the plugin for simple forms with only input fields. I’m having difficulty adding the file upload field. It keeps loading endlessly when I drop it on the form. Please what can I do to solve this problem?

      1. Hello, I’m grateful for your reply. The only challenge I have now is that, to access the support page, I need to Login. I cant remember signing up or is it a service available to only customers that purchased the plugin? If so, I feel embarrassed because I’m only using the free version. Please help. Thanks.

  2. Is it possible to export forms with data fields and image attachments (jpg) to a spreadsheet, please? I need to do this form competition entries. Thanks.

  3. Hello, Can I add the File Upload field with the free version of WPForms, or do I need the pro version to do this. One more question. Is it possible to change the color of the contact form text? Many thanks!

  4. Hi,

    can I restrict the size of the files user can upload (without using the general WP size setting) and… I’m having a multiuser site… can I send the info wich user uploaded the file?

    1. Hi Andreas,

      While in the WPForms editor, you can restrict the file upload types and sizes. Click on the upload field in the right-hand preview panel. Then in the left column, see Max File Size. That will determine the file upload size for this form.

      Max File Upload Size

      To show which user uploaded which file, you can use a form notification with a smart tag. From your form editor, go to Settings » Notifications. Scroll to the bottom for the Message. You’ll see “Smart Tags” in the upper right corner of the field. You can use smart tags to show details like the User Name {user_display}, the User ID {user_id}, or even the User Email {user_email}. When the user submits a form, your email notification can show you what they uploaded and who it was that submitted the form.

      Show User Info

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

[i]
[i]