Are you looking for a way to take form submissions in WordPress and display them on the front end of your website?
To help you accomplish this, we’re going to show you how to collect user-submitted content using Gravity Forms and display it on your website using GravityView.
GravityView allows you to display form entries on the front-end using a variety of different layouts. Create directories, membership websites, database applications, and more!
GravityView is simple and intuitive, with a drag-and-drop editor (so there’s no code required).
Keep reading to find out how to display form submissions in WordPress 👇
How Does GravityView Display Form Submissions in WordPress?
GravityView is an add-on or Gravity Forms that allows you to turn your form data into useful content and build powerful web applications. GravityView is built for ease of use and includes several preset layout options.
Here are some examples showing you different ways to display form data in WordPress using GravityView.
Display Form Submissions in a Table
By Selecting GravityView’s Table layout, each field in your form becomes a column in the table.
💡 Pro tip: See how to build a database app using GravityView.
Turn Form Entries Into a Directory
GravityView’s List layout allows you to display form submissions on after the other, in a directory style manner.
💡 Pro tip: See how to build a business directory using GravityView.
Display Form Submissions on a Map
The GravityView Maps layout allows you to display form entries on an interactive Google Map. This requires the Maps layout which is only available with the GravityView All Access license.
💡 Pro tip: Learn more about displaying Gravity Forms entries on a Map.
Display Form Data on a Calendar
Our Gravity Forms Calendar add-on allows you to display form submissions on a calendar.
💡 Pro tip: See how to build an events calendar using Gravity Forms.
Watch a Quick Video Demo
Why Display Form Submissions in WordPress?
There are several reasons why you might want to display form submissions on your WordPress website.
Using GravityView’s list layout, you can create a business directory, a member directory or any other kind of directory you want!
Here’s the basic workflow for building a directory using GravityView:
- Create a listing form using Gravity Forms to gather information for a directory listing
- Create a View using the List layout to display listings one after the other
- Add a search bar so users can search and filter listings from the front end
- Enable user editing to allow listing owners to update entries they create
With GravityView, you can display form data in a table layout. This allows you to build sophisticated front-end databases.
- Create a form to gather information
- Create a View and select the Table or DataTables layout
- Add fields to your View, which then become column headers in your table
Databases allow you to display user contact information, numerical data (such as sales figures, or analytics reports) and more.
Other Front-End Web Applications
Not only does GravityView allow you to display form submissions on your site, you can also edit entries on the front end. This allows you to build powerful CRUD applications on WordPress.
CRUD stands for Create, Read, Update, Delete and refers to the four basic functions underlying most web applications. This is what makes GravityView so powerful – there’s nothing you can’t build.
What You’ll Need
Here are the plugins you’ll need for this tutorial.
📝 If you want to display form entries on a calendar, you’ll need our Gravity Forms Calendar Add-On (GravityView not required).
How to Display Form Submissions in WordPress (5 Simple Steps)
Ordinarily, there’s no easy way to display form submissions in WordPress. However, with the right tools, anything is possible. In this case, the tools you’ll need are Gravity Forms and GravityView. After installing both of these plugins, follow the steps below to display form submissions on your WordPress site.
Create a Form to Collect User Submissions
The first step is to create a form to collect data.
To do this, hover over Forms and click New Form. After giving your form a name, you can add fields to it using the Gravity Forms drag-and-drop editor.
Gravity Forms includes a host of different field types, allowing you to build powerful forms for a range of use-cases. This includes contact forms, event registration forms, application forms, anything!
When you’re finished constructing your form, make sure to save it by clicking Save Form.
Create a View and Choose a Layout
The next step is to create a View and choose the layout you want to use to display form entries on the front end.
📝 A View is a custom post type allowing you to display form data gathered using Gravity Forms. You can also embed Views on pages or posts.
To create a new View, hover over Views and click New View.
After giving your View a name, you’ll need to select a data source. The data source refers to the information you want to display on the front end. When selecting a data source, you have two options:
- Use a form preset, or
- Select an existing form in Gravity Forms
Go ahead and select the form you created in the previous step.
After selecting a data source, the next step is to choose a View type. GravityView Core supports two layout options – the Table layout and the List layout. However, the GravityView All Access license include access to three additional layouts (DataTables, Maps and DIY).
The Table view is perfect for creating a database or displaying dense, numerical data. The List layout is perfect for directories, people profiles, and business listings.
When you’ve selected a layout option, you can start configuring your View.
Configure the Multiple Entries, Single Entry and Edit Entry Layouts
GravityView includes a drag and drop View builder, allowing you to choose which forms fields to display.
A View is made up of three separate pages.
- Multiple Entries Layout
The page where each of your form submissions will be displayed one after the other.
- Single Entry Layout
Clicking on an entry takes users through to the Single Entry layout page where they can find out more information about the entry.
- Edit Entry Layout
Configuring the Edit Entry layout allows users to edit form submissions from the front end.
You can configure each of the three layouts using GravityView’s drag and drop builder.
Start by configuring the Multiple Entries layout. To add fields to your View, click on the “+ Add field” button and select a field from the list.
At the top and bottom of the View layout, there are widget areas for adding search bars, pagination info and other GravityView widgets.
After configuring the Multiple Entries Layout, add an optional link to the Single Entry and Edit Entry layouts. When you’re finished configuring your View, check it out on the front end.
The next step is to adjust the View settings.
Configure the View Settings
After adding fields and widgets to your View, scroll down to the Settings meta box to configure the View Settings.
Settings are arranged in tabs on the left-hand side. Here you can enable user editing, change the order of your form submissions, and much more.
When you’re done configuring the View Settings, embed your View on a page or post.
Embed Your View on the Front End
Embedding your View on the front end allows you to display Gravity Forms entries on a page or post.
All you need to do is copy the GravityView embed shortcode and paste it into your page editor.
💡 Pro tip: Embedding a View on a page or post is optional, as they can be accessed directly. However, if you do decide to embed your View, you may want to disable direct access in the View settings (you’ll find this option in the Permissions tab).
If you’re using Gutenberg, click on the “+” icon and add a Shortcode module to your page layout.
Next, paste the GravityView embed shortcode inside the text input.
That’s it! When you’re done, save the page and open it on the front end.
Display Your WordPress Form Data: Wrapping Up
Turning user submitted information into content for your WordPress site is useful for a number of reasons. Displaying form entries in WordPress allows you to build directories, databases and other front-end CRUD applications.
In this post, we showed you how to display WordPress form submissions on your website using Gravity Forms and GravityView.
To learn more about displaying Gravity Forms submissions in WordPress, find out what GravityView can do for you! 🙌
Join Our Newsletter!📧🙌
✅ Helpful Gravity Forms content straight to your inbox
✅ Be the first to hear about new updates and releases