how-to-create-a-wordpress-file-upload-widget_g

How to Create a File Upload Widget in WordPress

Want to let your website visitors upload file attachments to your WordPress forms anywhere on your site?

Giving users the ability to add files and media to your site’s forms can make it way easier for you to collect the information you need.

In this article, we’ll show you how to easily create a WordPress upload widget to accept files from your website visitors.

Click Here to Start Making Your WordPress Upload Widget Now

WPForms is the best WordPress Form Builder plugin. Get it for free!

Before you create your WordPress upload widget, you’ll need to create a WordPress file upload form. If you’ve already done this, you can jump ahead to step #6.

Here’s a table of contents for easy navigation of each step:

  1. Create Your File Upload Form in WordPress
  2. Switch to the Classic File Uploader (Optional)
  3. Customize Your File Upload Form Settings
  4. Configure Your File Upload Form’s Notifications
  5. Configure Your File Upload Form’s Confirmations
  6. Add Your File Upload Form to a Widget
  7. View The Files

Thinking about starting a site or want to make it easier to edit your own? Check out our guide to picking the best website builder for small business.

 How to Create a File Upload Widget in WordPress

Depending on the type of information you want to collect on your form, using a WordPress upload widget is one of the best ways to make it easier for you to get more info from your users quickly. Making forms easier to fill out and more accessible helps reduce your form abandonment rate so your WordPress website can generate more revenue.

Make sure to check our our guide on how to accept additional file types on your WordPress upload forms.

Step 1: Create Your File Upload Form in WordPress

The first thing you’ll need to do is install and activate the WPForms plugin.

Unlike the Google Form upload file feature, WPForms lets you add file uploads to anywhere on your site, not just form pages. For more details on how to install it, see this step by step guide on how to install a plugin in WordPress.

Next, go to your WordPress dashboard and click on WPForms » Add New in the left-hand panel to create a new form and name it whatever you’d like.

name file upload form

Next, scroll down to the Additional Templates section and type “File Upload Form”, then click on it to open the template.

file upload form template

Make sure you’ve already activated the Form Templates Pack Addon to search for this form.

Now, WPForms will populate a pre-built File Upload Form and display the drag and drop builder.

file upload form with file upload field template

Here, you can add additional fields to your contact form by dragging them from the left-hand panel to the right hand panel. Or, you can remove fields to make sure your form fits nicely in your upload widget once you add it in step #6.

With the File Upload Form template, you’ll already have the Name, Email, Phone, File Upload, and Additional Comments 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.

Not only that, but you can also add the File Upload field 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.

Event organizer? Be sure to head over to our article on the best event WordPress themes and plugins.

add file upload field to contact form in wordpress

You can click on the File Upload field and also change the:

  • Label — Name the form field so your site visitors know what it’s for.
  • Description — Add a description explaining details to users. For example, if you only want people to upload an image, 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 that users upload a file before they can submit their form, select this checkbox.
  • Style — You can switch between the default Modern style (recommended) and the Classic style (which we’ll cover in-depth during the next step)

Wondering where these file uploads will be stored once it’s in your WordPress upload widget?

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 Store field in WordPress Media Library checkbox under Advanced Options.

check box to store uploads in wordpress media library

You can also make forms look great by following the steps in our post on how to create a Multi-step form in WordPress. But for the sake of this tutorial, we’ll stick with a single page.

Step 2: Switch to Classic File Upload Field (Optional)

This step is optional and not generally recommended. But, if you’d like to change the style of the File Upload field from the default Modern style to the Classic style featuring an ‘Choose Now’ button for your WordPress upload widget, head to Advanced Options » Style and click on the Dropdown to select Classic.

switch to classic file upload style

Switching back to the Classic style might be a good choice:

  • You or your users prefer a ‘button’ style File Upload field
  • You prefer a more compact File Upload field (and you’re only accepting 1 file)

Just keep in mind the Classic File Upload style only accepts 1 upload per field.  You’ll need to add another File Upload field to accept multiple uploads on your form if you’re using the Classic style.

To make your form appear clutter free, you’ll want to enable conditional logic on the 1st classic File Upload field before you add those other fields. That way, those extra File Upload fields won’t show up on your form unless a user needs them.

wordpress multiple file upload form

This trick makes the form look more organized and helps fight form fatigue, which can help boost form conversions.

Each Classic style of the File Upload field allows users to upload just one single file. To learn how to add multiple file uploads with the Classic style uploader, read on. If just one file upload field works for you, you can skip the next step.

To enable condition logic on a Classic style Field Upload field, drag a Dropdown field from the left-hand panel to your form, just above the file upload field. (This will work with any number of Upload File fields, but for the sake of this example we’ll do 3.)

drag dropdown to add multiple file upload fields

Now click on the dropdown field to see the Field Options on the left panel and edit the Dropdown field label to say Number of Files to Upload and the Choices to say 1, 2, and 3.

number of files to upload dropdown

After that, click on the File Upload field and in the options, scroll down to and expand the Conditionals tab in the left-hand panel. Then, select the checkmark for Enable conditional logic.

Conditional Logic

Customize the conditional logic of the File Upload field just like the screenshot below:

upload your file

Keep in mind that new fields are added by clicking the Add new group button, which applies the OR logic. If you need more details about using the OR logic, read our guide on how to use And OR conditional logic.

The next step is to duplicate this File Upload field.

On your form, click on the duplicate icon on the right-hand side of the File Upload field.

duplicate file upload

In the left-hand panel, change the label of the new File Upload field to Upload Your Second File.

rename your multiple upload fields label

Now configure the conditional logic for this new field just like the screenshot below. The only change from the above step is that we removed the first action where it says the Number of Files to Upload is 1.

wordpress contact form multiple attachments

Now, duplicate the 2nd file upload field by clicking the icon and changing the label to Upload Your Third File.

name your file upload form on form for the wordpress upload widget

Configure the conditional logic field just like the screenshot below. We’ll only keep the last field where it says the Number of Files to Upload is 3.

Upload third file

Once you are done customizing your form, click Save in the top right corner of your screen. And now you’ve just added multiple file upload fields to your form.

save your multiple file upload form

So as you can see, in most cases you’ll want to use the Modern style to accept multiple file uploads.

Don’t forget to take a peek at our list of the world’s best WordPress plugins.

So now that you have the right amount of file upload fields on your form (be it just 1 or multiple), you’re ready to configure your form’s settings.

Step 3: Customize Your File Upload Form Settings

To start, go to Settings » General.

File Upload Form General Settings configurations wordpress upload widget

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.

And when you’re done, click Save.

Step 4: Configure Your Form’s Notifications

Notifications are an excellent way to know when someone submits a file to your WordPress upload widget.

And, unless you disable the notification feature, you’ll get an email notification whenever someone submits a form on your site.

set up notifications

To get an email message when someone completes your form, you’ll need to set up form notifications in WordPress and provide your email address.

Also, if you use smart tags, you can send a personalized notification to your site visitors once they finish your form to let them know you received it. This assures users their form has gone through properly, along with their file upload.

how to use smart tags in notifications

For more on this, check out our step by step guide on how to send multiple form notifications in WordPress.

In addition, you have the option to easily brand your notification emails by adding your logo or any image you choose in the custom header image area. The logo/image you choose will show up at the top of email notifications like the WPForms logo below.

Custom Email Header for wordpress upload widget

Note: Since file attachments can often hurt email deliverability, WPForms doesn’t attach your user’s files in notification emails. Instead, we send the file uploads via email as links.

Notification Email Links

Make sure to check out our list of the best email marketing services!

Step 5: Configure Your File Upload Form’s Confirmations

Form confirmations are ways to take action immediately (and automatically) after your user has submitted information to your WordPress upload widget. For extra help with this step, check out our tutorial on how to setup form confirmations.

There are 3 different kinds of confirmations in WPForms:

  1. Message — This is the default confirmation type that appears after someone hits submit on your form, and it’s customizable. Check out our tips on ways to customize your confirmation message to boost your site visitors’ happiness.
  2. Display Page — Automatically send users to any page on your site like a thank you page
  3. Redirect — Useful if you want to take the user to a different website or specialized URL for more complex development.

So let’s see how to set up a simple form confirmation in WPForms so you can customize the success 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.

Form Confirmation Type settings

Want users to be able to register on your site themselves? Check out our post how to create a WordPress user registration form.

Then, customize the confirmation message to your liking and click Save when you’re done.

Now you’re ready to add your form to your website’s widgets.

Step 6: Add Your File Upload Form to a Widget

After you’ve created your form, you can add it to a widget area on your WordPress site.

WPForms lets you add your forms to multiple places on your website including your pages, blog posts, and WordPress widgets.

To add the file upload form to a widget and create your very own upload widget, go to the left-hand panel on your WordPress dashboard and click on Appearance » Widgets. Then, scroll down and click on WPForms from the available widgets.

wpforms widget area wordpress upload widget

The widgets that are displayed may look different to each person, depending on your theme. Certain WordPress themes allow you to have certain WordPress widgets.

Select the area you want to display your WordPress upload widget in and click on ‘Add Widget’ when you’re ready.

Now, select which form you’d like to display in that widget and click Save.

select form in upload widget

That’s it! Your file upload form is now on a WordPress widget on your website.

Step 7: View The Files

WPForms stores each form submission as an entry in the WordPress database. To view uploaded files, go to WPForms » Entries.

From there, click on the number in the ‘All Time’ entries column to see all of the entries.

click on file uploads for a wordpress upload widget

Once you’re viewing all of the entries, you can then click on View in the Actions column in an individual entry to access the file that was uploaded through the WordPress upload widget.

click on view

Now, you can right click the file to download the file, or click on it to view it in your browser.

view file upload entry in wpforms wordpress upload widget

Better yet, you can use our Zapier addon, to automatically save all file uploads to:

And to find out how people are finding your upload form and your website, read our guide on how to install Google Analytics on WordPress.

Click Here to Start Making Your WordPress Upload Widget Now

In Conclusion

And there you have it! You now know how to create a WordPress upload widget to accept files through your website’s forms. Make sure to also check out our post with great tips on small business marketing you can try today as well.

So, what are you waiting for? Get started with the most powerful WordPress forms plugin today.

And don’t forget, if you like this article, then please follow us on Facebook and Twitter.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

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.