A Step By Step Guide Towards The Creation Of A File Upload Form In WordPress

What is it that you should do when your website audience intend to upload a file to your WordPress form? The obvious answer is that find a suitable and user friendly way to help them do so.

Now our intention is obviously to help you find that befitting option that you need to give them. But a word of advice first. Your search is a valuable asset to you in this case because user interactions will help boost the way they engage with you. So it is obvious that they will judge you by the ease with which they can perform such actions on your website.

This article is aimed at equipping you to set up a user friendly and owner friendly file upload form for your WordPress site.

The following table of contents will help you easily navigate through the entire article.

Table of contents:

  1. Creating the file upload form in WordPress
  2. An optional switch to the classic style file upload field
  3. Setting custom options for your file upload settings
  4. Configuring notifications for your file upload form
  5. Configuration for the confirmation messages of your file upload form
  6. Adding the finished form to your website
  7. Viewing the files

The importance of file upload forms on your WordPress forms

Form abandonment rate is a surgical strike on the information availability and revenue generation.

Your users will feel the compulsion to avoid filling out a long form, and this coupled with their busy schedules you are very likely to end up with a very high form abandonment rate.

However, a file upload field in place will reduce such repulsion and convert most of the engaging users into valuable information providers.

For this however you might have to manually integrate the file upload field.

Let us take a peek into what are the general situations where you would need a file upload field in your WordPress form.

  • A resume attachment with a job application form.
  • Pictures or videos to be uploaded as part of a competition or giveaway.
  • For client specific forms they might have to attach important files like a doc or an excel sheet.
  • Customer support forms, audio files for podcasts etc are some more examples.

Lucky for you there are a multitude of WordPress plugins available for such easy integrations. This will help you make your dream of a file upload field a reality.

However, like every system, WordPress has its own security measures implemented to safeguard all of its benefactors.

However, this security feature sometimes hampers an owner from letting his website make use of its full potential.

But such restrictions are not permanent and hence can be overridden to implement the intended methods safely and legally.

In your case the limitations will be in the form of file types and formats.

Here’s how you can bypass such a difficult situation if you run into one.

Step 1: Creating the file upload form in WordPress

The initial step towards your goal is installing and activating the WPForms plugin.

The WPForm upload differs from Google Form in a way where WPForms allow you to upload files anywhere on your site and not just on your form pages.

In case you need a step by step guide on the installation and activation of the WPForm visit this link.

After installation and activation you need to navigate to your WordPress dashboard. From there select WPForms>>Add new. You can find this option on the left side panel. This way create and name your form.

Before moving on to the next important thing in this step you must make sure that the Form Template Pack Add-on is activated or not. If not activate it.

Once the form is created and add-on activated scroll down to Additional Template section and enter “File Upload Form”. You can then open the template by clicking on it.

WPForms will now display a drag and drop window and will generate a pre-built file upload form.

This setup will allow you to drag intended items from the left side panel to the form model on the right side.

The common form elements will be already present there. And now you can easily add and remove other form elements via drag and drop.

The order of the elements can also be altered this way.

Now moving on to the core part. The file upload field can be added to any form by just dragging the file upload form field under Fancy fields.

The following items can be replaced after clicking on the File Upload Field.

  • Label – The forms on the site is better off named for your visitors to better understand what its intended purpose is.
  • Description and Allowed file extensions – In case a specific file type is only allowed for upload then the description can help your visitors not waste time by trying to upload an incompatible file type.
  • Max file size – This is an important description and will definitely help users to set their upload file’s size accordingly prior to the upload.
  • Required – This checkbox option will help to make sure that users don’t leave out an important upload.
  • Style – The styles can be switched between Classic and Modern(recommended).

An intriguing question that might bug you right now is where exactly are these uploads being saved. Well, they are transferred to and stored in the WPForms folder inside the Uploads directory of your website.

An easier alternative is to store the files in the WordPress Media Library under Store Fields.

Step 2: An optional switch to the classic style file upload field

This is an optional and often unrecommended step as far as file upload forms are concerned.

The steps are clear from the image select the Classic style from the style drop-down menu in Field Options. The justification for this transition is solid if;

  • Your users or you yourself prefer a button style file upload option.
  • In case a more compact File Upload field is required where only one file is being uploaded.

That said you must always remember that classic file upload restricts your users to only a single file upload at a time.

To avoid your form being too cluttered you can employ conditional logic on your first classic file upload field before you add the other fields. This will help make your form look neat and compact.

To employ conditional logic first drag a dropdown field into the form.

Now open the field options of this new dropdown field by clicking on it and you can see it come live on the left side panel.

Then edit the label into say, “no. of files to upload” as shown below.

Your next step is to set the conditional logic. To do so scroll down and expand the conditionals tab after clicking the File Upload Field. Then tick the Enable Conditional Logic.

Step 3: Setting custom options for your file upload settings

To start this step, navigate to Settings >> General.

The following items can be configured here

  • Form Name – In case you want to rename your form, this is the right place to do it.
  • Form Description – Here you can describe your form a bit.
  • Submit Button Text – You can choose the label on the submit button to say “Complete Upload” or “Upload Now” rather than the plain old submit button.
  • Spam Prevention – To prevent someone from uploading a spambot you can enable the anti-spam honeypot feature.
  • GDPR Enhancements – The entry information and user details such as IP addresses and user agents are sometimes irrelevant to you, in such a case you can disable the storage of these elements.

Step 4: Configuring notifications for your file upload form

The best way to know if someone has submitted a file is to get notified about the option. Luckily WordPress plugins offer such notifications.

Unless you disable this notification feature, you will receive an email whenever a visitor uploads a file via the form with notifications enabled.

To receive such email notifications you have to do some prior settings on your WordPress forms. The first step towards this is to provide an email address.

By the use of smart tags, you get the added benefit of being able to provide an acknowledgment to your visitor who has submitted a file to your form.

Also, you can promote yourself with a stylish logo that is your brand recognition as you can see the WordPress logo in the following image.

Step 5: Configuration for the confirmation messages of your file upload form

Immediate and automated actions are the vital qualities of a well-structured form for file upload.  WPForms offer 3 different kinds of form confirmations.

  1. Message – It is the most common and default confirmation method. But it can be customized according to your preference.
  2. Display Page – If you want your customers or visitors to be appraised via a thank you page, this is the option for you. It serves as a redirect to a thank you or appraisal page.
  3. Redirect – If you require your visitors to perform an action or if they expect a new page like an estimate page this the confirmation type that you want to use.

Now we are about to set-up a custom WP confirmation message step-by-step.

From the Form Editor under settings click on the Confirmation tab.

The next step is to decide and choose from the three different confirmation types.

Save the confirmation message you have selected after modifying it as per your requirement.

Your form is now ready to be up and running on your website.

Step 6: Adding the finished form to your website

Once you have sculpted your form to your needs and specs, you have to make it go live on your website. And while doing so WPForms allow the owner to set such forms in multiple places on your website.

This includes blog posts sidebars and pages.

However, the most common placement type for forms is in posts/page embedding.

Select the page or post you want to attach your form to, or if it is intended to be a fresh post or page make a new one as shown below. Click on the Add WPForms icon inside the first block.

This will make the WPForm widget to appear inside your block as shown below, then select the WPForms dropdown and pick the created form from the list.

A blue button on the right top that says publish or update is your next target. Click on it and voila your form has appeared on your website.

Step 7: Viewing the files

It is obvious that you need to see the uploaded files somehow. In WPForms each upload is stored as an entry. To access these entries use the following step,

WPForm >> Entries

From the window that opens up select the right form from the dropdown menu and click on view.

The next thing you might want to do is download or view the file. To do so right-click the file to download the file, or click to view it in your browser.

If you prefer not to download or view each file individually but rather collect them al into one place such as Google drive or dropbox, you can make use of the Zapier addon.

Some Final Thoughts As we part ways, for now, we have a bonus gift for you in our basket. So far we have been discussing file uploads via forms. If you intend to let your users upload files directly to your website visit our article on how to create a file upload widget in WordPress.

Share now!

Share on facebook
Share on twitter
Share on linkedin
Related Posts