How to display uploaded images in Gravity Forms

The Gravity Forms File Upload field allows users to uploaded images in their form submissions. Sometimes it’s helpful to display those images on the front end after the user has submitted the form.

In this post, we’ll show you how to display uploaded images using GravityView. This will allow you to build image galleries, display people profiles, and much more. Let’s get started!

Example of displaying images uploaded to Gravity Forms

Here’s an example of an image gallery created by displaying images uploaded using Gravity Forms.

Uploading images with Gravity Forms submissions

You can allow users to upload images with their form submissions by adding a File Upload field to your form. The Gravity Forms File Upload field allows users to upload images, documents and other files when they submit your form.

To add a File Upload field to your form, open the visual editor, open the “Advanced Fields” tab, and select the “File Upload” field.

From within the field settings, you can limit the allowed file extensions to ensure that users can only upload image files. You also have the ability to set a maximum file size.

If you want users to be able to upload multiple images, simply enable the “Multi-File Upload” feature in the field settings and specify the maximum number of files.

Creating a form with a File Upload field is the most straightforward method of allowing users to upload images using Gravity Forms.

However, there are also several other image upload add-ons that give you more options and flexibility when uploading image files.

Gravity Forms image upload plugins

Gravity Forms File Upload Pro by Gravity Wiz and Image Hopper are two popular image upload plugins for Gravity Forms. File Upload Pro adds additional functionality to the existing File Upload field, such as the ability to sort, crop and preview images.

The Image Hopper plugin is more sophisticated and includes a range of powerful functionality such as the ability to crop images, add markup, select filters, and much more.

For an in-depth comparison of these two plugins, read our full review of file uploaders.

Displaying uploaded images on the front end

After users have submitted your Gravity Form, you may need a way to display uploaded images on the front end. This is easy to accomplish using GravityView!

GravityView is an add-on for Gravity Forms that allows you to display your form data on the front end. Using GravityView’s intuitive drag-and-drop interface, you can display uploaded images on your website or build powerful web applications—all with no code.

This allows you to create image galleries, people profiles, and more!

💡 Pro tip: You can see GravityView in action by checking out our range of live demos.

To get started with GravityView, create a new View, give it a name and select the form with the images you want to display.

The next step is to select a View Type. GravityView supports 5 different View Types, allowing you to display your Gravity Forms data using different layouts.

After selecting a View type, you can start adding fields using the GravityView visual editor. To display an image, all you need to do is click on the “Add Field” button and select the File Upload field from your form.

You can drag and drop fields to rearrange them, and click on the gear icon to open the field settings. You can also add widgets to your View, such as search bars and pagination links. 

When you’re done, save your View and check it out on the front end! If you want to display the uploaded images on a page or post, simply paste the GravityView embed shortcode inside a WordPress Shortcode module. 

There are lots of powerful features to play around with in GravityView, so if you want to learn more about View creation, read our Beginners guide to building web apps with WordPress.

Editing uploaded images in Gravity Forms

Not only does GravityView allow you to display Gravity Forms data on the front end, it also allows you to edit entries from the front end. To start, you’ll need to add a link in your View to the Edit Entry Layout.

To make a field editable from the front end, all you need to do is click on the “Edit Entry Layout” tab in the View editor and add the field.

Now, users and Admins will be able to remove uploaded images and add new ones from the front end of your site!

Lastly, let’s take a look at how to add images inside your forms.

Adding images to a form

Now you know how to display uploaded images in Gravity Forms using GravityView, but what if you want to add images to your form? You can do that using the Gravity Forms HTML field. Alternatively, you can add an HTML <img> element to the field label of a select field (such as a Radio Buttons field).

💡 Pro tip: To learn more about adding images to Gravity Forms, read How to Add Images to a Form on the Gravity Forms blog.

Display uploaded images in Gravity Forms

The Gravity Forms File Upload field makes it easy for users to upload images as part of their submission. 

In this post, we showed you how to display images uploaded through Gravity Forms on pages or posts. We also showed you how to edit those images from the front end.

If you’re interested in building form-based web apps on WordPress, get GravityView today!