WPForms Blog

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

file upload widget

How to Create a File Upload Widget in WordPress

by Lindsay Liedke on Oct 15, 2018

Are you looking for a way to allow your website visitors to send you files directly through your website? If you have a website that accepts user-submitted content or forms that require a file be uploaded, such as a job application form, having a file upload widget in your sidebar will definitely come in handy.

In this article, we’ll show you how to create a file upload widget in WordPress using WPForms.

Why Create a File Upload Widget?

The main reason to have a file upload widget in your sidebar is to make uploading files much easier for your users. This way, they don’t have to load a separate page to view your form or send files as email attachments.

This is especially useful if you’re managing a website that involves user uploads, such as a graphic design blog that features freebies from designers, or a web design blog that showcases WordPress themes developed by your site visitors.

Having a file upload widget on your sidebar will allow users to quickly upload their files for your review.

You can also use a file upload widget to accept guest post submissions or job applications. And this is just the beginning.

Now, let’s see how to create a file upload form and add it to your website’s sidebar as a widget.

Step 1: Create A File Upload Form in WordPress

Before creating a file upload widget, you’ll need to create a file upload form.

Follow the instructions in the video to create a file upload form with basic contact form fields like Name, Email, and Message.

If you prefer reading, follow the steps below to create a unique file upload form. For the sake of this tutorial, we’ll show you how to create an upload form for a website theme marketplace or a blog.

The first thing you’ll need to do is install and activate the WPForms plugin. For more details, see this step by step guide on how to install a plugin in WordPress.

Next, go to WPForms » Add New and choose the Blank Form template.

blank form template

This will give you a blank form so you can add any form fields to the form you want, including the File Upload form field so users can upload their files.

Alternatively, you can use the WPForms Form Templates Pack addon, so you can use the File Upload Form template.

To do this, go to WPForms » Addon and find the one labeled Form Templates Pack addon.

Click Install Addon and then Activate.

form templates pack addon

Now you’ll need to create a new form.

To do this, go to WPForms » Add New, name your form, and choose the File Upload Form template.

file upload form template

WPForms will create a form for you.

file upload form

If you want, you can also choose the Job Application Form template and create a job application form that requires file uploads as well.

Step 2: Customize Your File Upload Form

WPForms makes customizing forms easy to do.

You can add additional form fields to your file upload form by dragging them from the left hand panel to the right hand panel. Then, to make changes just click on the form field.

add file upload field

You can add many form fields to your form to make it more effective and suit your individual needs. For example, you can add checkboxes, dropdown menus, and even add credit card processing to accept payments.

If you need help with accepting payments on you forms, check out this article on how to require payment on a WordPress file upload form.

It’s important you customize the File Upload field to make sure site visitors can upload the files they need to when submitting your form.

To do this, click on the File Upload field and do the following:

  • Change the label so people know what to upload
  • Add a description with instructions if needed
  • Specify the types of file extensions you’ll allow people to upload
  • Enter a maximum file size if you want to restrict the size to be smaller than the default of 128MB
  • Click the Required checkbox if everyone submitting a form must upload a file

customize file upload form field

The file upload form field will support the following file types:

  • Images such as .png, .gif, and .jpg
  • Documents like .doc, .xls, .ppt, and .pdf
  • Audio like .wav, .mp3, and .mp4
  • Video such as .mpg, .mov, and .wmv

For our example, you’ll need to check out our documentation on how to allow additional files types since WordPress will not allow code files such as .css, .js, or .json.

Lastly, under the Advanced Options section, you can click the checkbox labeled Store file in WordPress Media Library for easy access to the files users upload.

Store Files in Media Library

When you’re done customizing your form, click Save.

Step 3: Configure Your File Upload Form Settings

There are many settings to configure once you’ve customized your form to look the way you want it to.

General Settings
To start, go to Settings » General.

WPForms General Settings

Here you can change things like your form’s name, description, and submit button copy.

You can also enable additional spam prevention features to keep your website secure from unwanted form submissions.

Form Notifications
Notifications are a great way to send an email whenever a form is submitted on your website.

WPForms Notifications Settings

In fact, unless you disable this feature, whenever someone submits a file upload form on your site, you’ll get a notification about it.

For help with this step, check out our documentation on how to set up form notifications in WordPress.

If you need to send more than one notification, for example to yourself, your head developer, and your site visitor, check out our step by step tutorial on how to send multiple form notifications in WordPress.

Form Confirmations
Form confirmations are messages that display to site visitors once they submit a file upload form on your website. They let people know that their form has been processed and offer you the chance to let them know what the next steps are.

WPForms has three confirmation types:

  1. Message. A simple message that displays once someone submits a form on your website thanking them and letting them know what the next steps are.
  2. Show Page. Redirect users to another page on your website, such as a thank you page.
  3. Go to URL (Redirect). Send site visitors to a different website.

If you want to display different confirmations to site visitors based on the type of file they upload, be sure to read up on how to create conditional form confirmations.

Click Save.

Step 4: Create a File Upload Form Widget in WordPress

Now let’s see how to turn the file upload form you just created into a widget and display it on your site’s sidebar.

Step 1: Go to Appearance » Widgets in your WordPress dashboard.

Step 2: Find the WPForms widget and drag it onto your preferred sidebar. Where you can place the WPForms widget will depend on the WordPress theme you use and what widget sections are available on your website.

wpforms widget

Step 3: Select the file upload form you’ve just created from the forms list and click Save.

Go to your website and see your file upload form on your website sidebar.

And there you have it! You now know how to create a file upload form widget in WordPress and add it to your website’s sidebar.

If you want to add a file upload form to other unique places on your website, check out this tutorial on how to add a form to your WordPress footer. And if you want to, you can also check out this article on creating WordPress forms with multiple file uploads so site visitors don’t have to submit more than one form at a time.

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.

Comments

  1. Thanks for reading this article – I hope you found it helpful.

    I wanted to let you know about our new WordPress survey plugin that allows you to build interactive polls and surveys within minutes. You also get best-in-class reporting, so you can make data-driven decisions.

    You can get it 100% free when you purchase WPForms Pro plan.

    Get Started with WPForms Today and see why over 1 million websites choose WPForms as their preferred online form builder.

    Syed Balkhi
    CEO of WPForms

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.