How To Create A WordPress Form With File Upload

Posted by Stacey Corrin on February 26, 2020

Last updated on: February 11, 2020

Do you want to learn how to create a WordPress file upload form? Giving visitors the ability to upload files to your website, is the ideal way to gather important information about them. Then you can learn more about your users and improve your business to serve them better.

In this article, we’ll show you how to use a WordPress file upload plugin to build your own form to collect that information.

But first of all, why should you let users upload files to your website?

Why Use a WordPress File Upload Form?

Using a WordPress form with a file upload option is a great way to gather files, photos, and other media from your site visitors.

If you accept job applications, for example, you’ll need a file upload option for people to submit their resumes or application forms.

On the other hand, if you’re a business or blogger, you may want to collect user-generated content to display images with product reviews or for use on social media.

A file upload form can even be used by podcasters to accept audio clips to play during a session.

As you can see there are many reasons why you might need to let your users upload a file to your WordPress site. So how about we show you how to create one?

How to Create a File Upload Form with a WordPress Plugin

To add a file upload form to WordPress, you should first choose the right WordPress plugin for the job.

In this tutorial, we’ll be using WPForms to build a WordPress form with the ability to upload a number of file types. 

WPForms is the best plugin on the market for creating forms on WordPress. It’s easy to use and simple enough for beginners to get started quickly. Plus the powerful form templates make building any WordPress form a breeze.

And if you don’t believe us, just take a look at these comments from happy WPForms users.

reviews of WPForms

So go ahead and get your copy of WPForms here. Then install the plugin on WordPress following these instructions.

When you’ve activated your plugin, follow these steps to create your own file upload form:

  1. Create a Contact Form in WordPress
  2. Add the File Upload Field
  3. Configure the General Form Settings
  4. Set Up Your File Upload Form Notifications
  5. Add the For Confirmation Message
  6. Publish Your WordPress File Upload Form
  7. View the Files Uploaded to WordPress

Ready? Let’s get to it.

Step 1: Create a Contact Form in WordPress

The first step is to create a form using one of the pre-built WPForms templates. We’ll be using a standard contact form for this tutorial.

To do this, from your WordPress Admin area, head to WPForms » Add New.

Add a new file upload form to WordPress

You’ll see a screen similar to the one above where you can give your form a name and choose a template.

Select the Simple Contact Form template.

Then you’ll be taken to the form builder where you can customize and add new fields to the default template.

form builder for file upload wordpress form

The default fields included in the Simple Contact Form template are as follows:

  • Name
  • Email
  • Comment or Message

And you can click any of these fields to drag and rearrange them. To add more fields, simply click an option from the left-hand side of the screen and drag it to your form.

Step 2: Add the File Upload Field

With your simple contact form in place, you’re ready to add the file upload option to your form.

To do this, head to the Fancy Fields heading and select the File Uploads field. 

Then drag the field from the left-hand panel and drop it to where you’d like it to be on your form. You can also simply click the File Uploads field to have it appear on your form. 

drag the file upload field and drop it onto your form.

To edit the file upload field on your form, simply click it to open up the Field Options.

edit the file upload fields

Here you can edit the following options:

  • Label – change the name of the field.
  • Description – enter text for the form field description.
  • Allowed File Extensions – enter the file extensions you’d like to allow separated by commas.
  • Max File Size – enter the max size of each file in megabytes. The minimum size is 300 MB.
  • Max File Number – enter how many files users are allowed to upload. The default is 1. 
  • Required – tick this checkbox to make uploading a file a requirement.

The great thing about file uploads with WPForms is you’re able to allow multiple file uploads all at once. All users have to do is drag and drop the files into the upload area.

Step 3: Configure the General Form Settings

With your form now setup with the ability to accept file uploads, it’s time to configure your general form settings.

To do this, go to Settings » General.

General form settings

In the general form settings you can configure the following options:

  • Form Name – give your form a new name if you’d like.
  • Form Description – add a description to your form to better understand what it’s for.
  • Submit Button Text – change the text of the submit button.
  • Spam Prevention – reduce unwanted form submissions by checking the anti-spam honeypot option.
  • Information Storage – disable storing entry information in WordPress to comply with GDPR laws.

Click Save when you’ve configured these settings then move on to the next step.

Step 4: Set Up Notifications for Your File Upload Form 

Now click Notifications under the General Settings tab.

Here you can choose to turn notifications on so that you’ll receive an email whenever a form is submitted.

Set the notifications for your wordpress file upload form

To keep things quick and to improve email deliverability, WPForms doesn’t attach submitted files to the email notification. Instead, a link is provided for you to click and view the uploads.

By default, notifications are turned on. However, you can choose to disable them by selecting Off from the dropdown menu. 

Turn off form notifications

Then make sure you save your changes.

Step 5: Add the For Confirmation Message

Next, click the Confirmations tab to set up the message people will see after submitting their form.

form confirmation message

There are 3 types of confirmation message available with WPForms and they are:

  1. Message – display a simple thank you message confirming the form has been submitted.
  2. Show Page –  redirect visitors to a thank you page on your website.
  3. Go to URL (Redirect) – send visitors to a different website after submitting their form.

To use the default message confirmation option, simply enter a message into the confirmation message box provided then save your changes.

Step 6: Publish Your WordPress File Upload Form

Now it’s time to publish your file upload form in WordPress. WPForms makes publishing a form really easy. You can add your form in a post, page or even in the sidebar of your website.

Here’s how to publish a form in a WordPress page.

First, head to Pages » Add New to create a new WordPress page. Then click the plus icon to add a new content block.

add a file upload form to wordpress with the content block option

In the search box type WPForms and the form block will show up. Go ahead and click it to add it to your page.

Now select your WordPress file upload form from the dropdown box to insert it.

Select your file upload form from the drop down box

Click Publish to publish your page and you’re done.

Here’s how it will look from the front of your website.

New WordPress form with file upload

Step 7: View the Files Uploaded to WordPress

Once people have started uploading files to your website, you can view those files by heading to WPForms » Entries.

View uploaded files in WordPress

And click view on any file to see the details. The file will open in a new browser tab. And don’t worry, any image files won’t be sored in your media library.

View the uploaded file information in WordPress using WPForms

Congratulations! You now know how to create a WordPress form that lets users upload their own files. All by using a powerful WordPress form plugin with file upload features.

We hope you found this tutorial helpful. To learn how to create an online order form in WordPress, check out this other step-by-step guide.

And don’t forget to follow us on Twitter and Facebook for more helpful WordPress tutorials like this.

Made with in Charleston, SC USA

Copyright © 2020 SeedProd LLC
Terms & Conditions | Privacy Policy | SeedProd Coupon Code