How to Create a File Upload Form in WordPress

Do you want to create a file upload form in WordPress?

Maybe you are hiring employees and want to collect resumes, or perhaps you are running a photography contest where you need the applicant to attach files.

In this video, we will show you how to easily create a file upload form in WordPress, step by step.

0:00 Intro
1:17 Using & Installing WPForms
4:09 Creating a New Form
5:39 Fancy Fields
6:35 Adding the File Upload Field
7:27 Editing the File Upload Options
9:58 Advanced Options
11:40 Configuring Settings
14:26 Saving & Adding Form to Your Site
15:15 Adding a Form to an Existing Page
16:27 Customization Options

Related Links

►Subscribe today!
►Check out our blog!

Top Resources

⚡Use Promo Code WPBVIP⚡

►Best WordPress Contact Form Plugin
►Best WordPress Analytics Plugin
►Best Lead Generation Plugin
►Best WordPress SEO Plugin
►Best Theme Builder for WordPress

Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor
►What is SEO and How Does it Work?
►How to Install a WordPress Theme

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Follow us on Twitter:

Check out our website for more WordPress Tutorials

#WPBeginner #WordPress #WordPressTutorial

In today's video I'm going to show you How to create a WordPress form which has A file upload option as well now why Would you want to create this there Plenty of examples and if you're Watching this video you probably know Why you want to create it but just for People who are watching this for Knowledge purposes they just want to Learn how to do this and why they can do This let me just give you a few Scenarios where this can be useful if You let's say are an e-commerce brand And you send obviously send products to Users you might tell them to hey share Your images with when you're using the Product in some way so that we can Feature you on our social media that's One use case if you have a let's say Tech support kind of a business where You have you solve people's problems you Might want to have some screenshots of The problems that they are having with a Specific product so in that case you can Create a form that where people can Upload screenshots and third scenario Would be hey running contest if you're Running uh a photography contest then You will need to have images coming in Photographers so that you can judge them On their photography skills and there Are plenty of other use cases where you Can use a file upload option in inside WordPress for users or enable users to

Actually upload files to the site if You're accepting job applications then You might accept PDFs if you want Photographs you might accept jpgs or Pngs so all of these scenarios can be Covered with the video that I'm going to Do or show you right now so let's begin The video so this is the WordPress Website we'll be working with and it's a Completely blank website so nothing on It so everything that I'll do I'll do From scratch you can just follow along So what we'll be using to create this Kind of functionality on our website is WP forms WP forms is one of the biggest Or I say most popular form builder for WordPress it's completely free to use For basic use cases but for today's use Case what we'll be doing we'll be using The pro version of WP forms so what you Need to do is go to WP I'll Leave a link on the um right here on the Screen and as well also in the Description and as well as in the pinned Comment you can go and check out all the Features that are useful to you but for File uploads you'll need the pro version As I said anyways so just go here figure Out the pricing make a purchase if you Want to otherwise First Watch the video And then decide if you want to make a Purchase once youve made the purchase You need to log into your account so if I'll do this right now I'll be able to

Log into my account you're already Logged in I'll go into my account and Inside my account you'll have to do two Things you can see this is my overview Or this is the account overview I'll go To downloads where able to download the License key or copy the license key Which is right here I'll blur part of it And I'll click this button to download The wp forms Z file on my computer this Is the plug-in file we'll be installing Inside WordPress and that is how you'll Install WP forms on your website the pro Version the free version can be Installed directly from the WordPress Repository so once this is done once you Have the license key saved to your Computer and once you have WP forms Downloaded the zip file then we can get Uh go back to WordPress and continue the Process I'm here and to install plugins On our site we'll go to Plugins add new plugin so here we'll Have all these options but we'll choose The upload plug-in option because we Have the zip file we need to upload once This is done I'm going to drag and drop The zip file from my computer off screen And I'll just drag and drop it here and Let's click install now because you can See WP forms. zip is now activated so I'll click install now and this will Start the installation process for WP Forms it'll take just a few seconds to

Finish so once this is done we'll Proceed to the rest of the video all Right it's already done let's activate The plugin all right so WP forms is now Installed but since we have the license Key we'll also need to activate the Plugin so that you can all use all the Pro features so for that go to WP forms And go to settings and inside settings You'll have have the option of adding Your license key here so just copy the License key I'm going to just copy it From my uh the my computer Here and copy and I'll just paste it Here and I'll place or click verify key And now my site is updated with the Premium version of WP forms and I can Get automated updates and also I can go And ask support for any issues that I Have so once this is done now the Plug-in is set up now we need to create A new form on our site which can have a Functionality for file uploads so to do That we can directly jump into the add New functionality from the WB forms menu I'll click here and this will take us or Go through the building process of Creating a firm now the best thing about WP firms is that you have tons of Pre-build forms already created for you So you don't have to start from scratch And do everything yourself so you can See you have a contact form quote Donation billing newsletter sign up

Suggestion accident report and there are Hundreds of literally hundreds of forms Available to you for inspiration or if You just want to import it directly on Your site what I'm going to do is start With a simple form so I can showcase Some of the other functionality of WP Forms while getting the job done so I'll Use the simple contact form I'll click Use Template and this will open up the form Builder or the form customizer and you Can change the name of the plugin and Name of the sorry name of the form and All that that's completely up to you if You go into setup process here if I go Back and click here I can also name this Form so let's say if I name it hey Photography contest just to give you an Example photography contest Submission and I'll click uh use Template once again yeah yes I'll just Click it once again so just showing you The process that hey you can actually Edit the name of the form go back and Start so this is the uh form Builder on The right hand side what you see is the Final form how it's going to look on Your website and on left the left side You have all the fields that you can add To your forms in the standard Fields you See the text based option drop downs Multiple uh I say Choice options numbers Check boxes these are very useful what

We are mainly interested in is the fancy Fields this is the pro feature I was Talking about now we already see the File upload option here but I'll just Run you through all the different Options available you can have a phone Number address which can autofill a Website URL date time file upload which Will be using password Rich Text layout Page break section divider HTML content Preview ratings signatures and all these Other options you also have payment Options available so if you want to Collect let's say a payment or donations You can add these buttons here using Stripe or PayPal and directly collect Payments with WP forms is very powerful Let's uh let me show you how to actually Add the file upload field here inside This form so what I'll do is just hover Over the file upload field here click And hold it and just drag it on my form Here and you can see whenever I want to Just let go it will be added at that Particular place you can see the blue Height U outline already uh representing Where it's going to be Sav so I'll just Add it just below the email and here we Already have the form ready so you you Can collect the name email and file Upload so here's where they'll upload Their uh files or images and then the Com comment if you want to collect phone Numbers as well you can just drag the

Phone number field here as well and just Let it go and now you can collect phone Numbers as well I'm going to skip it for Now so I'll delete it and go here now Every field that you add can be Customized based on hey does it a Require field what you want the Placeholder to be so if you want to see The relevant settings for a particular Field just click on it so right now the File upload field is here I'll click on It and instantly use you see I'm inside The field options so here's a label so I Can change the label to Hey upload Your photographs and instantly you see I Can see a live preview here I can also Do a description here and this is where It gets interesting this allowed file Extensions options this is where you can Customize what kind of files are users Allowed to upload on your site as I said In the example or in the previous Example if you have let's say a order Confirmation form you can have PDFs Enabled if you have a photography Business you can have jpgs if you want To accept screenshots from users then Pgs as well and WordPress does have some Restrictions on what kind of forms or What kind of file extensions uh you can Import due to security reasons for Example I'm pretty sure svgs will not be Accepted but jpgs pngs PDFs most common

Uh image formats will be accepted and Here's how you add those specific Conditions here so let's say for example I am uh I I want to accept the jpg Format and the p format so what I'll do Is I'll actually type it in using and Including the dot of the extension as Well so I'll type do Jpg and then comma for another extension Do PNG so what I'll do is I'll just zoom in On the screen for a second so I can Actually show you how I've written this So that you can actually do this Yourself so it's jpg comma for next Extension. PNG and if I want it to have PDFs then I'll just do the same thing Comma. PDF and then those file Extensions will also be accepted in the Next field you can configure what should Be the maximum size you're willing to Accept because do keep in mind anything That's uploaded right here from this Form is going to take space on your Server so you have to manage those space As well for a photography website I Would say anything around 10 megab is Fine so just keep in mind whatever size You specify is the size in megabytes That you're specifying so since we are Uh doing a photography contest Submission you you need a higher Resolution image so 10 MBT otherwise if It's a tech support thing you can have

It to let's say 2 mbytes I think that Would be sufficient then you can also Customize maximum number of files a user Can submit so it's this we are running a Hypothetical contest I want users to be Able to submit up to three images as an Entries to this photography contest so This is the basic configuration of the File upload field but there's also a Couple of things we can go and see in The advanced options inside the advanced Options you can have these Styles and You have couple of options let me Explain what these are now this field What you see here is the modern style in Which case users can drag and drop Images directly on from the computer and Have those uploaded directly on the site Now of course they can use uh the Regular File Explorer or the finder in Mac by clicking this area but let's say For example this uh some because some of Some issue this is not working for you Or you don't like the look of it then You can just go and switch to the Classic option and then they'll have to Click the dialog box or the button and Choose the file um from the computer This is similar to how we uh use or this Is the look of this is very similar to How we installed WP forms in the first Place inside WordPress so it's very Familiar but I'll Swit stick with modern Cuz I think it suits well or works well

With the actual uh say theme of the form Then you also have the option of uh Enabling this store file in WordPress Media library now this is a very useful Feature as I said any image or any Extension any file will actually be Saved on a server anyway but let's say For example if you want to let's say Create a post about hey here's the top 20 entries that we featured in our Photography contest and the top three Winners in that case you'll need to have Those images uh attached to a particular Post so it's good to have those images Show up in your media library and by Enabling this option whatever entries You'll see will automatically be start Showing up in your media library as well So you'll able to use them on your Website so it's useful to know what this Feature does so depending on what use Case you're using using this for you can Enable it or disable this okay so going Back now we have set up everything there Are couple of extra things you can Configure these are good to know when You're setting up a form like this so For that you what you can do is just go Back to add fields and go to settings Here now inside the settings there are Bunch of different settings but most of Them will be grade out because we are Not added a relevant functionality to The form we just need to configure two

Main things one is a notification and One is a confirmation I'll just briefly Talk about what these are and then you Can configure them yourself notification Is think about what happens for you as The website owner when a form is Submitted the default option that Wpforms configures is that you get an Email directly from WP FMS that hey an Entry has been made but what if you want To customize the messaging what if you Want to customize what emails get sent Or you want to customize where the email Goes or you want to add multiple actions That hey send this email and do two Additional things as well this is where You customize this so right now if I uh I say collapse this you'll see Notifications have been enabled and this Is the default notification if I open This you'll see that it's sent to the Admin email and it's saying hey from the Website from and reply reply and is Saying hey what's the entry being made And if the advanced options you can see What's the email template be used blah Blah blah all these good options so it's Very powerful in terms of how you want To configure this but if you want to add This or add another notification option Just click on this and you can create a New notification and you can have an Email sent out or you have whatever Actions you can configure I already

Showed you the amount of configuration Options here so you can create multiple Notifications per form depending on what The use case is and as for the Confirmations the confirmation is what The users see after they submit a form Because let's say for example you want To have a a notice displayed that hey Your entry has been saved or thank you For getting touch we'll help you shortly Or you want to redirect them to another Page so in that case you can configure All of these actions right here from Confirmations so right now you see the Default confirmation is message but you Can also show uh do show page or go to URL or redirect them to a site so again You can have multiple configurations or Multiple confirmations set for users but To keep in mind that if you have let's Say for example show a message and also Redirect they might not have enough time To read the message so I'll stick with The default one for now just so you can See but I'll customize the message here So I'll Say thanks uh for Submitting your Photographs your Entry to for the contest Has been made Successfully so this is how I've Customized the messaging what users will See after they submit a form so do keep

In mind that I I'm not saying you need To customize this but you should know Where to customize it if you require or You want to do this and you have other Options as well and I'll just stick with The basic ones go back to the fields Option you see you're happy with Everything you've done you're happy that Hey I don't want to make any more Changes to this forms just click the Save button and this for will be saved Now it's saved but the next step is you Want to add it to a page or a post on Your site so there a couple of ways to Do this the simple way is actually just Click this embed button once you click The embed button you'll say hey do you Want to embed this on a page and uh yes Yeah so in this case what you can do is You can just create a new page directly From this option and this form will Automatically be added to this page so I'll say Photography contest entry form So once I do this now since I when I Click let's go it'll create this new Page on the site and add the form Directly so I'll click this and now the Page is created and the form is Automatically also added but let me also Show you how you would do this if you Were doing this to an existing page so I'll delete this form here and even I'll Go back to or I'll just yeah I'll go

Back to the website directly to the Admin area and I'll show you how to do This so since I didn't save the changes There's no page on my site so you can do This for Pages or you can do this for Posts it works the same way I'll create A new page the regular way in WordPress I'll click this and I'll just add the Title of the page once more I'll say Photography contest Entry form now in this uh actual content Area or the body of the post I'll add a New block to the page I'll do uh WP Forms so this is a brand new block that WP forms adds to the site once you click On it you'll have the option of Selecting which of these forms that you Have created on the site do you want to Embed on the site so since we have just One form you'll just see one entry but If let's say you create 10 different Forms you can choose which form should Be embedded on this particular page so Once you just click on this the form Will be embedded right here and looks Exactly how you created it now before we Actually test this out I want to talk About the customization or The Styling Options with WP forms this was pushed Out as a few months back but it's Underutilized and it will allow you to Just customize your form and customize Or beautify your form right here inside The WordPress Builder so if you just

Click on the wp form form or the block You'll see the block options or block Settings appear here if you scroll down Just a little bit you'll see you have Themes options or as a pre-build themes View which you can just click and apply To your form directly and if you scroll Down you can even customize or change Everything about the form manually I Like the theme option because it speeds Up the process so I'll just demonstrate A couple of themes for you let's go to And select the Matrix option so if I Click the Matrix option you'll get a Notice because this is using a Background theme that's completely fine You just have to click continue once and Install and add on to your site but now You see it's a beautifully customized Form done for me if I scroll down and I Choose plaster now it's a beautiful new Theme if I choose Sonic this looks Beautiful spring this also looks nice And you have tidle this also looks great Tranquil looks great let's stick with Sonic for now I think it's a clean and Nice design and once this I'm happy with This I can even go down and customize All of these settings the Border values And everything the colors and everything So if you're not just limited to the Styles that I showed you you can Customize everything but the style is Just faster way to get started so once

I'm happy with this I'll just click the Publish button publish and this form and This page is now now published I'll open It up in a new tab and this is how it Looks beautiful so let's test out this Site or test out this form as well and I'll show you how to see the entries That are being made on the site as well So I actually fill out this form so what I'll do is just fill out my Name and email I'm not going to do my Actual Email and now time to add the images so I'll drag three images that I have and Drag them directly uh on this form and Here it goes you can see these are being Uploaded in real time and I can say my Entry and do keep in mind that sometimes You'll notice that the submit button is Grayed out in that case just observe the Images because if you're adding a Testing this out if the image is not Uploaded or still in the process of Being uploaded the submit button is Grade out in the meanwhile or in the Meantime so once you're happy once this Is done I'll click the submit button and We should see the confirmation box that We customize or confirmation message That we customized thanks for submitting Your photographs your entry for the Contest had been made successfully so This is how the functionality of the Form works but what about seeing uh the

Entries that are being made now do keep In mind since we conf configured WP Forms in a way that it sends you the Notification so it should send a Notification to the admin email Automatically that this entry has been Made since this is a test site I haven't Configured the email properly so I'm not Going to show you how the email looks But we can still check out uh w forms Backend to see all the entries that are Being made so if I go back here and go To WP forms or the admin area of my Website now if I go back to WP forms and If I see inside all forms or inside the Menu I have entries here but I can go to All forms directly and inside the forms If I hover over the form you'll see the Form menu here and you have edit which Can edit the form and entries which is Where you can see the entries being made From this particular form so if I click The entries button you'll see this is The entry that we just made and if I Click the view button I'll be able to See all the details about the entry so Name the email and the the photographs So if I click this this will actually Download these photographs to my Computer if I want to do this and you Can see all these complete details here Now since we enable the option of adding The images directly to our media library If you go to the media library you will

See the images here as well now do keep In mind that these are the originals of What the user has submitted these are Not copies of it so if you delete it From here they'll be deleted from the Form entry as well so do keep in mind do Not delete this unless that is what you Are intending to do so this is the image First that I first image or third image I uploaded this is another image I Uploaded and this is another image I Uploaded now just to demonstrate if I go To a new post on my site and create a New post I can use these very images That were just added to the gallery so If I go to Media Library you'll see These images now I can add them to post On my site directly as well that was the Benefit of that feature and if you go Back and leave this we can go to WP Forms all forms and now you can Customize the form you can change the Form and the benefit of using the Approach is if let's say you want to Change this edit this form any time or Any place you've added this form will be Updated automatically so you don't have To go to 10 different locations if you Use this form in 10 different locations And update it it'll be updated Automatically and whenever a new entry Is made you'll get an email and go into The entries option and see all the Entries that are made being made with

This particular form and all the details As I already showed you all the details About this will be captur and you can Just download them export them and do Whatever you like with these entries on Your WordPress website all right so this Is about this uh the end of the video I Just showed you completely step- bystep Process of how to create a WP form or How to create a form on your website Which accepts file uploads and also Explain a variety of scenarios where you Can use this functionality on your WordPress website if you have any Questions and the comment Box is open Otherwise you can like share subscribe Do all that good stuff and if you would Want to continue WordPress education Then make sure to subscribe to the Channel and also share this video Someone who think will benefit from this Message and you're watching yaj from W Beginner I'll catch you in the next Video very soon take care

You might like