Gravity Forms is a popular WordPress tool that enables you to create and publish forms on your website. With this application, you can add contact forms, surveys, and evaluations to your website. There are many things you can do with Gravity Forms. This article will focus on one of the most outstanding features, File Upload Field.
File Upload Field, which is an important advanced feature of Gravity Forms, allows your users to attach any file to their form submission. In other words, you can encourage users to upload documents, photos, audio, and videos via a form.
Let’s talk about why you should add a file upload plugin. In this article, of course, we will also tell you how to do it. Hold tight!
- What the Gravity Forms File Upload Feature Provides
- How to Add File Upload Fields to Your Gravity Forms
- Recommended Gravity Forms File Upload Plugins
- Best Gravity Forms File Upload Plugins Comparison
What the Gravity Forms File Upload Feature Provides
Although there are many reasons to apply the File Upload, the intended uses of this feature may differ depending on what purpose your site serves. If you are advertising for a job vacancy, users can upload their applications. If you are a teacher, you can ask your students to submit their assignments and projects. These are just a few. Let’s glance through the list below!
- Employment Application Form – Applicants can upload their CVs, cover letters, portfolios, and more.
- Educational Institutions – Students can submit their homework, projects, and assignments online.
- Competitions – When taking part in a photo or video competition held on your website, contestants can send the relevant files by uploading them to the form.
- User Registration Forms/Membership – Users should upload their photos when they sign up for your site.
By utilizing this feature, you can easily collect user’s information, organize it in one place, and give users an effective experience!
Before you read further.... Free Download (PDF)
Secret Side Door
Secret Google Search Tactic That Will Skyrocket Your Sales, Connect You to the Perfect Partners, Influencers & Affiliates and Send Your Google Rankings Soaring! FREE when you sign up for Digital Creators Edge, a free newsletter for Digital Creators who wish to take their business to the next level.
If you’re interested so far, move on to learn how to set it up.
How to Add File Upload Fields to Your Gravity Forms
It will be useful to know some field settings before making any changes to your form.
When you select a field, you usually see three different Field Settings sections available in the right-hand sidebar:
- General
- Appearance
- Advanced
#1 General Settings
Field Label is the field’s name, displayed to users when they fill out a form on your website.
Description is the text area explaining the purpose or instructions.
When Input Mask is enabled, the form administrator can determine the format to be accepted in this field by selecting one of the standard masks offered or by specifying a new one.
The Maximum Characters section helps you limit the number of characters that can be written in this field.
Unless the Required section is marked, the form cannot be submitted.
Select the No Duplicates option to only allow unique values from the user.
#2 Appearance Settings
The Placeholder section is the text appearing inside the space to inform the users of what to expect.
Field Label Visibility is used to specify whether the field label should be displayed on the form.
Description Placement is used to specify where you want the description to appear.
Custom Validation Message displays in red when an entry fails validation for this field.
CSS Class is used to apply unique styling and formatting to elements. You can change the default styling by customizing the CSS Class name.
Field Size, selected as small, medium, or large, affects the width of the input field.
#3 Advanced Settings
Admin Field Label is the label of the field that is displayed in the administration interface.
Add a Default Value to pre-populate the field when the page is first loaded and shown to the visitor.
Enable Autocomplete is chosen to let users fill in the field automatically.
Enable Password Input is turned on to hide the text typed in this form field with a default character.
Visibility decides the visibility of the form. There are visible, hidden, and administrative options.
So, how can you add a File Upload Field to your form?
First of all, open the desired form, then choose Add Fields > Advanced Fields from the menu. Add the File Upload field to the form.
In General Field Settings, enter the file extensions that you accept in the upload. They should be the file types that WordPress supports.
Here, you can adjust the Maximum File Size for uploads. This option can save storage space. If you leave this option empty, Gravity Forms will use the maximum size limit set by your server and/or WordPress installation.
You can also allow users to upload multiple files at the same time. To achieve that, select the Enable Multi-file Uploads option in the File Upload Field Settings. This saves time and makes the form submission process quick and straightforward. Kill two birds with one stone!
Recommended Gravity Forms File Upload Plugins
You’ve finished adding the File Upload Field to your form. To enhance the upload functionality, it’s important to find the best File Upload plugins. Take the files you uploaded to the next level with the plugins we recommend.
#1 GF File Upload Pro
GF File Upload Pro extends the Gravity Forms file upload field with a bundle of professional features. You can improve your File Upload fields and user experience with image previews and optimizations, sorting, zooming, and cropping.
#2 Image Hopper
With Image Hopper, users can edit images and have them automatically scaled in the browser. Image Hopper supports image upload resizing, previewing, and cropping as well as GF File Upload Pro does.
You can resize, cut, optimize, and sort your images with both plugins. But which one meets your demand? Let’s see how these two Gravity Forms File Upload plugins perform the following features.
Best Gravity Forms File Upload Plugins Comparison
Image Upload Resize
GF File Upload Pro
Simply add a File Upload Field to your form, then check the Enable File Upload Pro box in the Perks tab.
After selecting the File Upload Pro option, there are two additional options to take a look at: Enable Sorting and Enable Cropping. Check Enable Cropping if you want to get further image resizing options.
Image Hopper
In the Advanced Fields area, there is an option called Downscale Images. Below you will see the Crop to dimensions section.
If you check Crop to dimensions, the images you upload will be cropped to the size you chose. With the basic license, which doesn’t include the Advanced Image Editor, the pictures will be cropped automatically.
To have your photo in different sizes, you can add more than one Image Hopper field to your form and set each one to a different resizing dimension.
Reviewing Images
GF File Upload Pro
GF File Upload Pro shows the image upload review as a thumbnail-sized image by default.
When you hover your mouse over an image, a pencil icon appears. The full-screen preview of the image is displayed once you click on the pencil.
Image Hopper
It comes with a drag-and-drop interface. When an image is dropped or selected, the preview displays a percentage of the file’s size as it uploads. There will be a notification in the upper right corner after uploading.
Image Cropping
GF File Upload Pro
The tool can also crop photos. When following the steps in the image review, users also have the option to crop the image by clicking on the pencil icon.
Image Hopper
With any license that includes Advanced Image Editor, you are able to allow users to crop their images while previewing the image, just like File Upload Pro.
Displaying Images on the Front End
GravityView is an ideal approach to displaying your photographs on the front end. The GravityView plugin assists you to construct “Views” that display form entries on your website’s front end.
GF File Upload Pro
When designing your view, simply select the File Upload field from your form. You can change the settings by clicking the gear icon.
Image Hopper
Using Image Hopper to display images in GravityView works much the same as using File Upload Pro. When designing your view, follow the same steps and choose the Image Hopper field.
Prices
Last but not least, let’s have a look at the prices of these useful plugins:
GF File Upload Pro: It is available as part of “Gravity Perks” at $149/year.
Image Hopper: It costs you from $99 to $259 annually depending on your needs.
Let’s Allow Your Users to Upload Files via Gravity Forms Now!
The opportunities offered by the Gravity Forms file upload area are obvious. Moreover, you have complete control over the settings and options of the form.
You’ve learned that you can turn the file upload field into a great user experience with little touches. It he time to take action!
Do you still have concerns about the File Upload field? Feel free to ask us in the comment section below!
If you’re selling file uploads via Gravity Forms, refer to our guide on how to protect Gravity Forms file uploads.
