How to create WordPress File Upload Form – Step-by-step Tutorial for Beginners
User uploads and File uploading forms can be quite beneficial to your website in different ways. For one, it lets you collect user content such as images, videos, and audios for various purposes. Another reason includes viewer responses study and more.
Upload forms and such create an effective medium of communication with your website’s readers and users where they can submit required data, information or content that you can use positively for your website. Using upload forms you can build processes for various purposes such as Job applications, Product reviews, post studying and reviews, customer responses, bug reports and interactive client services.
Now while providing a means for the user to upload files seems crucial in many cases, WordPress fails in that regard as it doesn’t have a native way to support user uploads. This is why we need to use plugins to build Upload forms and insert it into your posts and pages.
Thus, we introduce you to this post which will explain the process of making a WordPress File Upload form easily using plugins. Furthermore, we’ve selected one of these plugins and have provided a detailed media accompanied guide to help you build your customized Upload form.
3 Best WordPress File Upload Plugins!
There are lots of third-party plugins that let you add a front end uploader but for your convenience, we’ve picked out a few of them. Let’s review them and their core features:
1. Ajax Multi Upload
Probably one of the most popular premium upload plugins, Ajax Multi Upload is extremely easy to use to build WordPress upload forms. It works by letting you add Ajax-powered forms which means that you can easily upload files without the need for refreshing the page. Ajax multi upload also lets you add an upload form for users that supports multiple file uploads.
The theme comes with extra features useful for managing user submissions such as extension filters, size limits, file number uploads.
Key Features:
- Ajax Powered Upload forms
- Multiple uploads with file size and file number limits and restrictions.
- Easy form management, upload statistics custom upload buttons.
- Image resize feature, Image thumbnails, auto upload and upload files into WordPress Gallery
2. WP User Frontend
Rather than just letting users upload posts and files, Wp User Frontend creates an easy to use interface for users to let them submit posts, create and manage profiles and more. The plugin has a great free to use model that adds all the necessary features such as frontend updating, building customized forms, Email notifications and more.
The plugin also allows a ‘Pay Per Submission’ payment system for creating easy to manage subscription packs.
Key Features:
- Allows users to build profiles and submit posts through forms.
- Paid subscription systems can be applied.
- User restrictions can be applied.
- Easy to manage subscription admin panel.
- Pro version adds further functionality such as Captcha support, Avatar uploads, Drag-n-Drop form builder, guest post support,etc.
3. WordPress File Uploader
WordPress File uploader is an extremely easy to use frontend upload tool. By using a simple shortcode, you can easily insert an Upload form on your post or page. The plugin is completely free to use yet adds extremely beneficial features such as custom fields for additional data, screenshot capturing and webcam accessed photos/videos.
The admin backend is also benefited by this plugin as it provides a file browser for accessing uploaded files. It further lets you add upload filters and set up actions before and after uploading.
Key features:
- Easy to use, manage and can be easily added to posts and pages
- Supports additional fields such as Text, Checkboxes, email fields, etc
- Notifications and E-mails for checking when someone uploads.
- Upload progress can be monitored and canceled at any time.
- Uploaded files can be saved on external locations, attached on the given page and allows redirection to another URL after upload.
- Pro version adds Multiple file upload features, increases file size limit, captcha, drag-drop file uploads and more.
How to use the plugins:
For this demonstration, we’ve chosen as WordPress File uploader as it is extremely easy to use and its free version has more than enough features required for file uploading. It also adds further options that can be highly beneficial for the users.
First, install and activate the plugin.
After you are done activating it, go to the Settings panel of the plugin. This panel lets you add further functionality to your plugin, view upload logs, lets you access all the uploaded files through the File browser and perform maintenance operations.
Plugin Operation:
For now, we will only go through the basic idea of using this plugin. The demonstration will guide you through the process of creating a simple form consisting of an upload button that only takes images, an Email listing, Name listing and a Textbox for further info.
First, refer to the main page of the panel and click on Add Plugin instance button.
This lets you easily add the upload shortcode to any page or post. This can also be manually done by adding [wordpress_file_upload] to the text editor of your pages/posts.
Now we need to customize the upload forms. Click on edit under the Instance number, this directs you to the Upload form edit panel.
Now the number of settings and customizations are too large to list out here, so we’ll go through the most important parts you will need to understand and the rest you can mess around if you feel curious.
First, take notice of the Generated Shortcode box.
This is the shortcode of your form. Enabling or disabling functionalities edits this shortcode and adds more elements to it. Do remember that you can use the current upload form on any page or post by simply copying this shortcode and pasting it into the text editor of any corresponding page/post.
Upload Form Setup
Now to set up your form, we are going to go through each section of this customization panel. First, we manage the custom settings.
General
Here you manage the general details of your plugin form. First, let’s fill in the basic details.
1) Basic Functionalities:
Start by inserting the desirable ID for your form. This is automatically entered based on the form listing as well.
Next, the single button operation removes the need to click on Upload button the second time for confirming the upload. By enabling this, you can let the user instantly upload the file. This is great to enable if you want to create a simple upload only button. For now, leave it off as we’re building a detailed form.
The Upload path feature lets you set up the directory of your uploads inside the file manager, whereas the plugin fit mode lets you choose whether to leave the form to be fixed to your page or be responsive based on your theme settings.
The Allow No File feature lets the user upload a form without the need to upload a file attached to it. For this demo, we will turn this off.
2) Filters:
Next, the upload roles let you choose what kind of users can upload the files. This is great if you have an account system enabled on your website and want to control who can upload the files. We will leave it as is, meaning we’ll allow all users to upload the file.
You can designate what kind of files can be uploaded through Allows File extensionslisting. Since we are building a form that only images, let’s insert
*.JPG* *.JPEG* *.PNG*
Do note that you can add more, but you need to insert the extensions between the asterisks. Similarly, Allowed file size lets you define the max upload size for the upload in MB. Let’s limit this to 1MB for now.
3) Upload Path and Files:
Next, turn on Create Upload Path. This feature automatically creates the upload path/directory if it doesn’t exist already. The Do Not Change filename button lets you disable a feature of the plugin that auto changes the filename if it has an unsupported character in its filename.
Set the folder access method to Normal if you don’t intend to use FTP either to your own domain or an external domain.
Show Upload Folder path lets you show the upload path to the user while Select Subfolder lets you give choices for the user to upload files to designated directories. For now, set show Show Upload Folder path to On and Select Subfolder to Off.
File duplicates policy is how the plugin handles files with the same name. If you set it to maintain both, it lets you select the rules for auto-renaming the file.
4) Redirection and Other Admin Options:
The other features provided are :
- Redirect after Upload: Lets you set an auto-redirect after uploading the file.
- Show Detailed Admin Messages: Gives a more detailed information about upload to admins.
- Disable Ajax: Disables AJAX forms and uses HTML forms, which requires a page refresh to upload.
- Test Mode: For testing purposes, lets you change plugin features but disables uploading.
- Debug Mode: Provides info about errors in case Uploads aren’t working.
Once you are done, click on Update and your upload form should be done in the given post. You can also copy the given shortcode into posts to preview it.
Additional Data fields:
Now to set up the additional info required such as Email address, Name and more click on Additional Data fields. Then, click on Include Additional Data fields to turn it On.
Next, let’s define the data fields. The first thing we need is a Name field, so select the type as Simple text. The label should give the user somewhat an info on what the field is for, so write Name on the Label. Then choose the label position. Now you can choose what fields are required and will not be auto-completed by the browser.
Then, choose the position for the hint which shows when the user enters the wrong type of data.
As for the default value, it lets you put in a default value for the field if the user doesn’t entire anything. Leaving it empty doesn’t save a default value and as since we set the name as required, we don’t need to give a default value.
To add another Data field, Click on the + button on the right.
Similarly, the X button lets you delete the data field while the Upwards and the Downwards arrows let you set up the position of the data fields.
Now set up a field for an Email address by clicking on the Type drop-down list and choosing Email. The setup is similar with the further addition of a Validation option that checks whether the email is correct or not.
You can add more types of data fields such as Multiple lines text, validation Email, Confirmation email, Passwords, Checkboxes, Date, Time and more.
After you are done editing your additional fields, click on Update on the panel and the new form should be automatically inserted into your post.
The end result should look something like this:
However, do note that you can add more features and customizations to your upload form. From button designs to detail colors and more. The rest of the customization provided by the plugin are:
Placements:
Lets you add plugin components such as Title, upload bar, Filename and more. Drag the components from the right box to the left to add them, and the opposite to remove them.
Labels:
This allows you to setup Labels for the buttons and components of the form and add text information to it.
Notifications
This is for setting up automated Email notifications for notifying admins when an upload has been sent. Here you can set up which email accounts receive the email, the header of the Emails, Email subject as well as modify the automated message’s text.
Colors:
This is for setting up the colors of the message shown if the Upload was successful, failed or if the user requires a warning notifying an error in his form. You can set up the background color, text color and border color of the warning message.
Interoperability:
Here you define the compatibility with other plugins. You can enable connection with WP Filebase plugin as well as attach the upload files to the post and send the uploaded files straight to your WordPress website’s media.
Dimensions:
Here you can add custom definitions for the components of the plugin. You can edit the size of each and every element of the custom form. Giving a blank value sets the default size for the element.
Webcam:
This is a very useful feature of this plugin that lets you enable the user to directly record a Video or take photos through their webcam. You can choose whether to record audio or not as well as provide aspect ratios, Frame rate and dimensions of the video itself.
The plugin also lets you define the record time of the video as well.
Concluding:
Now your custom upload forms should be set up and ready to be used. The plugin also has further functionality that we haven’t explained for the sake of eliminating needless difficulty for this post’s readers.
However, if you are curious about these features you can easily learn about them by hovering over the help button to learn what the given feature does.
Note:
Now while you’ve provided an upload form for users, people with bad intentions can easily abuse to bring harm to the website. From uploading unneeded harmful files to uploading Web shells by hiding them in your files, to overloading your servers by mass uploading, there are many ways your upload form can be abused. So do remember to set up security measures such as file upload restrictions, limits, extension limits as well as consider using the premium version of the given plugin for using Captchas.
Furthermore, you can consider these plugins for your website’s security.
