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.
Next, go to WPForms » Add New and choose the 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.
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.
WPForms will create a form for you.
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.
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
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.
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.
To start, go to Settings » General.
Here you can change things like your form’s name, description, and submit button copy.
Notifications are a great way to send an email whenever a form is submitted on your website.
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 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:
- 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.
- Show Page. Redirect users to another page on your website, such as a thank you page.
- 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.
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.
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.