How to Create a File Upload Form in WordPress (In 5 Steps)

I’ll walk you through two different methods to integrate a file upload form into your WordPress website.

First, we’ll start with the simplest method that takes just two minutes and stores the uploaded files directly on your server. Next, for those looking for a bit more functionality, I’ll show you a ten-minute solution that forwards these files to your email.

Both methods are 100% free. Let’s dive in and get started!

Method 1: How to create a file upload form in two minutes

There’s a super-simple plugin that does this, and it’s quite accurately named “WordPress File Upload.”

WordPress File Upload

Author(s): Nickolas Bossinas

Current Version: 4.24.15

Last Updated: December 6, 2024

wp-file-upload.zip

90%Ratings 20,000+Installs 2.9.2Requires

After you install and activate it, you get a new shortcode that you can put on any post or page:

[wordpress_file_upload]

The shortcode gets converted into a live file upload form like this one:

Granted, it’s not the prettiest thing, but it does the job.

In the plugin’s default settings, all the files uploaded end up on your server directly. They can then be accessed through the plugin’s own section in the wp-admin:

The file browser that comes with this plugin is actually pretty functional – meaning that it gives you a nice range of features and operations you can perform on the uploads. For instance, you can download them to your device, view them, see them in a directory on the server, etc.

All that being said, you have to take some additional things into consideration before you use this plugin. The chief of them is possible spam. In short, there’s nothing stopping users from uploading multiple files to your server and potentially compromising its security. The pro version of the plugin has some features to mitigate this, like Google reCaptcha integration.

Or, alternatively, you can use the next method:

Method 2: Create a file upload form and have the files sent to your email

For this method, we’re going to use the most popular contact form plugin for WordPress – Contact Form 7.

Contact Form 7

Author(s): Takayuki Miyoshi

Current Version: 6.0.1

Last Updated: November 27, 2024

contact-form-7.6.0.1.zip

80%Ratings 10,000,000+Installs WP 6.6+Requires

The main benefit of using it as our solution is that you get a lot more control when it comes to the types of files you want to accept – their size and extensions/types. Plus, they will also bypass your server and come straight to your email, which is somewhat of an additional layer of security.

Here’s how to set everything up with Contact Form 7:

It’s important to note that while Contact Form 7 is a well-established form plugin, it can be tricky to get to grips with (especially for beginners). There’s no visual drag-and-drop builder. Instead, you’ll customize your form content using simple markup.

But, if you do get stuck, there’s tons of documentation to read through. Meanwhile, the support forum is super active, so you can usually find a quick solution to your problem.

Since the plugin is totally free, you can install it straight from your WordPress dashboard. All you need to do is head to Plugins > Add New. Search for the plugin and select Install Now > Activate.

Step 2: Add a new form or edit an existing template 🧾

With Contact Form 7 installed on your site, you’re ready to create a file upload form in WordPress. If the activation was successful, you should see a Contact tab appear in your admin panel.

Click on the Contact tab and select Contact Forms:

If you want to create a file upload form from scratch, click on Add New. However, you’ll find a default contact form template listed here. Ours is labelled “Contact form 1.”

Since this template already contains useful form fields, it can be a great place to start for beginners. Therefore, go ahead and click on Edit to open the form in the editor:

You might like to change the name of your contact form at the top of the page. Then, scroll down to the form template.

As you can see, the form currently has various text fields like name, subject, and message. But, you’ll also find an email field and a submit button:

You can remove any of these fields by deleting the text. Or, change the field label by typing something new besides the <label> tag.

You might also like to include additional fields. For example, if you’re creating a contact form for potential clients, it can be a good idea to add a URL field so that you can view the client’s current website. To do this, select the relevant tag from the available options at the top of the editor.

Step 3: Create a file upload form in WordPress 📤

Now, you’re ready to add the file upload feature to your contact form. Therefore, you’ll need to make room for your field within the editor.

Then, select the file tag from the options listed across the top:

At this point, you’ll see a pop-up where you can configure the file upload feature:

First off, you can make the field a requirement by ticking the checkbox. Meanwhile, you can also change the file name.

The two most important settings are the File size limit and Acceptable file types. Without tweaking these settings, people are able to upload very large files, and malicious scripts that can infect your computer.

Although the File size limit is determined using bytes, you can add the suffix “mb” to work in megabytes. So, you might enter “10mb” into the box:

Next, choose which file types you want to accept on your form. If you’re asking users to upload images, you might include jpeg, jpg, png, and gif. Or, if you’re accepting resumes, you might stick with doc and pdf.

You can separate the file types using the pipe character:

It’s essential to make a note of the file tag at the bottom of the pop-up, as you’ll be needing this in the next stage. So, you can copy this down now to use later.

Once you’ve completed the file details, click on Insert Tag, and you’ll see the field appear in the editor:

Now, you can add a label to the field so that users know what to do. So, go ahead and add a <label> tag. Then, simply type the text that you want visitors to see:

Now, select Save at the bottom of the page.

Step 4: Insert your file tag to receive attachments by email 📧

With Contact Form 7, you’ll receive your form submissions via email. Therefore, any time a user completes one of your forms, you can view the message from the email address that’s associated with your WordPress account.

However, in order to receive the file attachments, you’ll need to add the file tag to the Mail tab. Hopefully, you copied down the file tag in the previous step.

If not, you can find the file tag in the form editor:

Copy the tag and switch to the Mail tab:

Here, scroll down until you see File attachments:

Paste the file tag into the box and click on Save to update the settings.

Step 5: Embed your form and test the file upload feature ⚙️

Now that you’ve created a file upload form in WordPress, you’re ready to add it to any page, post, or even a widget area. You’ll need to embed the form using a shortcode.

You can find the shortcode for your form at the top of the editor:

However, you can also quickly copy down the shortcode from the Contact Forms page:

Next, open an existing page or post on your WordPress site or create a new one. You’ll need to add a shortcode block to the page, so click on the + icon and search for “shortcode.”

Add the block to your page and copy in your form’s shortcode:

Now, save the page and select Preview to see how your form will display to visitors:

It’s also a good idea to test the file upload feature to make sure it’s working as you expect. Therefore, click on the Choose File button and add one of the accepted file types that you configured in the form settings.

If you have any required fields, you’ll also need to complete these. Then, click on Submit.

If your file upload form works, you’ll receive a confirmation message at the bottom of the screen:

Then, the submission will be delivered to the email associated with your WordPress account.

Is Contact Form 7 the only form plugin that can do this?

No. This feature – allowing file uploads – is offered by many other popular form plugins. The problem is that it is only available with the premium versions of those plugins.

Solutions like WPForms, Formidable Forms, and Ninja Forms will all let you set up file upload forms…at a fee.

This is why we’ve opted to show you how you can do this with Contact Form 7 entirely for free.

Why create a file upload form in WordPress

Standard forms allow you to collect customer details, like email addresses, telephone numbers, and feedback. However, there are times when you might need to accept files of different types on your site:

• For instance, during recruitment phases, you can streamline the application process by allowing candidates to attach their resumes directly to the form. This method is more efficient and organized compared to traditional email submissions.
• In industries where project details are critical, such as construction or software development, clients can easily submit necessary documents like blueprints or software requirements, streamlining project management.
• Customer support also benefits significantly from file uploads; customers can provide photos or videos clarifying product issues, leading to faster and more effective problem resolution.
• Additionally, for educational websites, students can submit assignments and projects directly through the site, which facilitates educational interactions and feedback.

Thus, integrating a file upload form not only simplifies data intake but significantly enhances your website’s functionality, making it a more valuable tool for business operations, customer service, and educational purposes. 🥎

Conclusion

To recap, we’ve shown you how to add a file upload form to WordPress using two distinct methods:

1. Use the WordPress File Upload plugin. It stores all files on the server and lets you manage them directly through wp-admin.
2. Use the Contact Form 7 plugin. It takes the submitted files and emails them to your address.

Do you have any questions about how to create a file upload form in WordPress? Let us know in the comments section below!