To allow users upload files of different types can be very useful. The basic idea of upload form is to let users upload a file from their local personal computer to the server. It doesn’t require any special knowledge from a user to do that, and he may do it in several clicks.
Nowadays many web sites use file upload form. For example in the most of profiles users can have user icon. So they find the appropriate picture in their PC and then with the help of file upload field they upload it to their profile on the web site. Or if it is a job search website, it will surely contain a field where people can upload their CV and portfolio. Photogalleries also need this field to allow visitors upload their photos and graphic pictures and share them with each other.
Also usually file upload form has some restrictions – if it is an upload field for a user icon, then you should allow to upload only files with .png, .jpeg and .jpg extensions – they are the most popular for pictures. If you want to allow animations too, then you should add .gif extension. If you want to allow only documents to be uploaded, then you should write .doc, .txt and .docx extensions. And if there is a music web site, you should allow only .mp3 and other audio files. You may also put some limit on the size of a file. For example if it is a user icon, it is better to allow files no more than 2 megabytes.
Minimally, the upload form needs to contain also a submit button. But it also may contain any other fields like – text fields, radio buttons, check boxes, confirmation boxes, whatever you want.
Let’s review the whole process of creation of a simple web form for file uploading with the help of PHPForms web form generator.
1. First you need to do is register for free in PHPForms.net site. Then to log in enter your email address and password. You will see the following window, where the list of your forms will be displayed.
2. Now the list is empty and in order to start building a new form, click the button “Create a new form” or the link “To create a new form click here” placed below.
3. You will see a window visually separated into two sections – on the right there is a panel with fields and elements you may add into your file upload form and their properties. On the left side there is an area of the form itself (workspace), where you see how the elements are placed and how the form will look like.
The toolbox on the right side contains three tabs: ‘Add field‘ – where all available elements are placed, ‘Element properties‘ where you may adjust a certain element you choose and the last tab is ‘Form properties‘ where you can specify the properties of the whole form – its color, name, size and so on.
4. We are going to create a form to allow users upload files. So firstly lets click on the tab Form properties and fill the general settings of the new form – write its name, description, message that user will receive after pressing ‘Submit‘ button, and the label of this button, choose a color of the form and its size.
5. Now we can start to add the fields to our upload form. Click Add field tab and then choose File Upload button.
6. On the workspace we see that File Upload field is now added to our form, in order to adjust it, lets go to the Element Properties tab. Here we write the label to this field, specify the maximum size of the uploaded file (in our situation we want the photo to be no more than 2 megabytes), and write the allowed extensions (we want only pictures to be uploaded, so we write the most common extensions for images: png, jpeg and jpg). As this field is the most important in our form, we check off ‘Required‘ box and users will have to upload the file in order to submit this form, otherwise there will be an error.
9. We have added all elements that we needed and made all necessary settings. Now you may press ‘Preview‘ button in the bottom of workspace and take a look at the form you’ve just built in order to understand that it looks just like you wanted.
10. If you don’t like something in this new form, or you decided to add a new field, you may continue to edit it, and if everything satisfies you – press ‘Save‘ button.