WPForms Blog

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

How to Create a WordPress Contact Form With Multiple File Uploads

by Shahzad Saeed on Sep 18, 2017

Do you want users to be able to add multiple attachments to your contact form? WPForms makes front end file uploads easy – no need for a separate WordPress file upload plugin. In this article, we’ll show you how to allow multiple file uploads using WPForms.

Allowing WordPress Multiple File Uploads

Providing your users the ability to upload a file in your WordPress forms makes it easier for you to collect the information you need. You can allow users to upload different file formats including .doc, .xls, .csv, .pdf, an image file, or even an audio / movie file.

By default, WPForms allows you to upload only a single file with a File Upload field. To allow multiple file uploads, you can simple add as many file upload fields as you need to.

multiple file upload fields

But, what if you want to allow multiple file uploads without displaying all those fields to every user?

There’s a way to do this with WPForms conditional logic, by allowing your users to choose the amount of files they would like to upload.

Let’s take a look at a step by step guide to allow WordPress multiple file uploads.

Create Your File Upload Form

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

After activating the plugin, go ahead and create a file upload form in WordPress.

Allow Multiple File Uploads

Then, above the file upload field, add a Dropdown field where each option is a number. Let’s rename the field to Number of Files to Upload. You can include the full range of possible numbers of upload fields.

number of files to upload

For the sake of this example, let’s allow users to upload a maximum of 3 files in your form.

Now click on the File Upload field and rename the field to Upload Your File. Then, let’s enable conditional logic. Based on user selection, we need to show multiple file upload fields in our form.

To do this, configure your conditional logic fields just like the screenshot below.

upload your file field

Keep in mind that new fields are added by clicking the Add new group button, which applies OR logic.

If you need more details about using OR logic, read how to use And OR conditional logic.

In the above step, we’ve just created a field that will display with every single number that gets selected.

Now duplicate this field by clicking the double paper icon on the right hand side of the Upload Your File field.

duplicate field

Configure the conditional logic fields just like the screenshot below. The only change from the above step is that we removed the first field where it says the Number of Files to Upload is 1. Let’s rename the new field to Upload Your Second File.

wordpress contact form multiple attachments

Again, copy the second File Upload field by clicking the double paper icon. Configure the conditional logic field just like the screenshot below. Let’s keep only the last field where it says the Number of Files to Upload is 3. Let’s rename the new field to Upload Your Third File.

upload third file field

Now save the form you just created.

You can continue this process for every other possible number. The only thing you need to take care is to duplicate the previous field, then remove the lowest number’s conditional logic.

That’s it!

You’ve just created a multiple file uploads form in WordPress.

wordpress multiple file upload form

If you enjoyed this article, you might also want to look at some cool contact page design examples.

What are you waiting for? Get started with the best WordPress forms plugin today.

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

Comments

  1. Why not support the multiple attribute on the input element? That would save the above effort and give a cleaner UI to the user….

    1. Hi John,

      Support for multiple file uploads to a single field is definitely on our radar, and we look forward to offering that at some point in the future. For now, though, the method above is a simple, clean way to let users upload multiple files to a single form.

      I hope that helps! 🙂

    1. Hi Sébastien,

      We don’t currently have a way to user the WordPress media uploader within the File Upload field, though we’ll certainly be considering best options for allowing the upload of more than one file per field in the future 🙂

    1. Hi Butch,

      An option to upload multiple files to a single upload field is definitely on our feature request list for consideration! I apologize, though, as we don’t have an ETA at this stage. Hopefully the approach described above is helpful in the meantime 🙂

    1. Hi Lee – This is definitely still on our radar, though no ETA currently. When we release new features, though, we also create announcement posts in this blog — so it’s easy to stay up to date with all the newest options and tools available! 🙂

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.