How to display Gravity Forms entries on the front end of your WordPress website. Customize the layout, sort entries, and create powerful applications.
Estimated reading time: 21 minutes
Gravity Forms is one of the most powerful and versatile form plugins for WordPress. Gravity Forms allows you to collect information, send email notifications, hide fields with conditional logic, and much more.
With the GravityView plugin for Gravity Forms, you can also display entries on the front end of your website – No code required!
Displaying Gravity Forms entries on your website opens up a whole new world of possibilities in terms of what you can build using WordPress and Gravity Forms.
GravityView is a powerful plugin with an extensive range of features and extensions.
Whether you’re a Gravity Forms veteran or a new WordPress user, in this guide, you’ll find everything you need to get started displaying Gravity Forms entries on your website.
If you need help navigating this article, we’ve included a table of contents below:
Table of contents
- Why Display Gravity Forms Entries on Your Website?
- What Is GravityView?
- Adding Fields to Your View
- Customizing the View
- Display Gravity Forms Entries on a Calendar
- Displaying Different Media Types
- Displaying Gravity Forms Data From Multiple Forms
- Why You Should Use GravityView to Display Your Gravity Forms Entries
- Final Thoughts on Displaying Gravity Forms Entries
Why Display Gravity Forms Entries on Your Website?
There are many reasons why you may want to display Gravity Forms entries on your website. Having the ability to display Gravity Forms entries on the front end enables you to build all kinds of powerful applications.
You can easily build a membership website using Gravity Forms and GravityView. Use Gravity Forms to collect user information and then display that information using GravityView in the form of a user profile.
You can configure the permissions to allow users to edit their own profiles and you can also hide certain information depending on a user’s role. Take advantage of advanced filtering and sorting capabilities for further customization.
Front End Database
Maybe you run a modeling agency and you need to keep track of all the models contracted to you. You could use Gravity Forms to collect all the information you need and then display it on your website in the form of a database.
This allows members of your team to view and sort entries and run reports without needing to view the backend of your website or login as an administrator.
There are so many other applications you can build by displaying Gravity Forms entries on the front end. For example:
- See how to build a feedback board
- See how to build a job application management system
- See how to build an online marketplace
As you can see, displaying Gravity Forms entries on your website using GravityView gives you access to powerful functionality that you can use to create diverse applications!
What Is GravityView?
GravityView is a WordPress plugin that extends Gravity Forms. Simply put, it’s the best way to display Gravity Forms data on your website.
GravityView allows you to:
- Display form data using different layouts
- Search, sort, and filter entries
- Edit and delete entries from the front end
- Restrict information to logged-in users
Not only does GravityView allow you to do all this and more, but it also comes with a simple and intuitive drag and drop interface.
That’s right, you don’t need to write a single line of code, simply drag and drop fields to create new Views. You can then embed Views that you create into WordPress pages or posts.
GravityView is a flexible add-on that integrates seamlessly with Gravity Forms. In fact, GravityView is a Gravity Forms certified developer, so you can be sure it’s a quality plugin (with excellent support).
Installing GravityView and Creating a View
Before installing GravityView, you’ll need to purchase a license from our website. There are three options – GravityView Core, Core + Extensions, and All Access.
The Core license gives you access to the GravityView plugin and two layout options, while the higher tiers include more layouts and a host of powerful extensions.
After choosing a license, download the GravityView plugin from your account page, install it on your WordPress website and activate your license.
After activating GravityView, you’ll see a new menu item called “Views” in your WordPress admin menu. Hover over it and click “New View”.
Next, name your View and select a Gravity Forms Form as the Data Source. You can either select a form preset or you can use your own form.
If you decide to use a form preset, GravityView will create a new form for you in Gravity Forms that contains all of the fields required for that preset configuration.
Before configuring your new View, the next step is to choose a View Layout.
Choosing the View Layout
Depending on the View type you choose, your entries will display differently on the front end. For example, if you choose the Table Layout, each row in the table will be an entry and each column will be a form field.
There are five layout options in total:
The layout you choose will depend on what you’re building with GravityView.
If you want to create a business directory then the List layout is perfect. The Table layout, on the other hand, is best for numerical data or dense data that’s difficult to visualize. Here’s a quick overview of each View type.
Displaying your Gravity Forms data in a table format is great if you’re building a database, or want an easy way to visualize complex data.
If you select the List layout, your entries will be displayed one after the other. The list layout has a dedicated space for images, making it perfect for user profiles, business directories, or product listings.
The DataTables layout comes with advanced filtering and sorting options. This gives you full control over how your data is displayed. You can also export your data in a variety of formats, making DataTables the perfect layout option for analysis and reporting.
If you have basic knowledge of HTML and CSS, you can use the DIY layout to build your own custom View layout!
Designers and developers often want to have finer control over the way entries display on the front end. The DIY layout provides the flexibility to build any layout you want, without being bound by a preset template.
Displaying Gravity Forms Entries on a Map
The Maps View allows you to display Gravity Forms entries as markers on a Google Map. This layout is perfect for store locators, business directories, and service directories.
To get started with Maps, you need to create a Google Maps API key and enter it on the GravityView Settings page.
Next, create a form in Gravity Forms and ensure that it contains an Address field. Now, create a new View and select Maps as the View Type.
You can then scroll down to the View Settings panel, click on Maps and start configuring the different options. You can change the icon color, change the map position, select the map type, and much more.
At the bottom, you’ll find a box where you can add your own custom CSS styles to your map. If you’d prefer to style your map without having to write code, then you can do so using the Snazzy Maps WordPress plugin.
Adding Fields to Your View
After choosing a View Layout, you can start adding fields to your View. This is made easy with GravityView’s intuitive drag and drop interface.
There are three pages that make up a View – the Multiple Entries page, the Single Entry page, and the Edit Entry page.
The Multiple Entries page is the main page that displays each of your entries one after the other. For an example of what it looks like, see the images above for each of the different layout options.
The Single Entry page allows you to narrow in on one entry and show more detailed information. This is great if your form has a lot of fields and you don’t want to display them all on the Multiple Entries page.
After configuring the SIngle Entry layout, you’ll need to add a link to the Single Entry from the Multiple Entries page.
The Edit Entry page allows you to edit entry data from the front end. Configuring this layout allows you to specify which fields are editable. You can add a link to the Edit Entry page from the Multiple Entry or Single Entry page.
You can also limit editing capabilities to logged-in users only or restrict editing to specific user roles.
The Multiple Entries Layout has spaces for both widgets and fields. Widgets are tools that help you navigate your View (like a search bar, for example), while fields are the information you display in your entry. As a general rule, fields correspond to the fields in your form.
You can add new fields to your View by scrolling down to Entries Fields and clicking the “Add Table Column” button.
You can also customize each field by clicking on the gear icon. This will open up the Field Settings popup window where you can add custom labels, restrict fields to logged-in users, and more.
You can find additional configuration options for your View in the View Settings meta box at the bottom of the page.
Once you’re happy with your View, you can embed it into a WordPress post or page by using the embed shortcode.
Customizing the View
Now that you know how to set up a basic View, you can start to explore all the different ways to customize the look and feel of your entries on the front end.
The custom content field allows you to add custom content into your View. This includes HTML, shortcodes, and more.
To add it to your View, click on the “Add Table Column” button and select the Custom Content field. Then click on the gear icon to open the field settings and add your custom content into the text editor.
Custom content fields also support Gravity Forms merge tags, which allow you to display values from your form. You can add merge tags by clicking the button on the right side of the text editor.
Sorting and Filtering Your Entries
GravityView also gives you the ability to sort and filter your entries. So, what’s the difference between sorting and filtering?
Filtering allows you to choose what entries appear in your View, based on parameters that you set. Sorting refers to the way your entries are organized (e.g. by First Name descending).
You can find the default filtering and sorting option under Filter and Sort in your View Settings.
Here you’ll find a range of options for organizing your entries. Sort by a particular field value, choose the sort direction, and filter your View based on dates.
For more advanced filtering and sorting options, you’ll need the Advanced Filtering extension. This allows you to control what entries are displayed in your View based on conditional logic.
Here are some of the things you can do with Advanced Filtering in GravityView:
- Show only the entries created by the logged-in user
- Display entries that match a search value
- Display entries depending on a user’s role
Do you want to make it even easier for users to navigate your View? In that case, you can use the A-Z Filters extension which allows you to display a list of links from A-Z. The extension supports multiple languages!
Okay, let’s have a look at some of the other ways you can customize your View, including adding social sharing links, creating featured entries, and allowing users to leave ratings and reviews.
This allows you to track the SEO status of your Views, add custom meta descriptions and utilize all of the other Yoast SEO features.
Social sharing also integrates with Jetpack, a free plugin provided by WordPress.com.
Social sharing buttons are a great way to encourage users to engage with your content. If you’re running a directory or an online marketplace, social sharing can help boost your organic traffic, leading to increased revenue over time.
If you’re running a directory, you probably want the ability to create ‘featured’ entries that show up at the top of the page. The GravityView Featured Entries extension gives you an easy way to do this.
All you need to do is mark an entry as ‘featured’ in Gravity Forms. It will then show up as highlighted and you can choose whether to display it at the top of the page or maintain your current listing order.
Many people are willing to pay a small fee to have their listing show up at the top of the search results. There are many ways you can use this feature, but one thing is for sure – featured entries have the potential to create a whole new revenue stream for your business!
Ratings and Reviews
With GravityView’s Ratings and Reviews extension, you can add the ability for users to rate, review and comment on your Gravity Forms entries.
This feature is ideal for business directories and event listings!
Allow users to up or down vote entries or display ratings using a 5-star system. Businesses can benefit tremendously from this feature as it allows them to receive valuable feedback from their customers.
To enable ratings and reviews, install the Ratings and Reviews extension. Next, edit your View and scroll down to the View Settings meta box. Here you’ll see a new tab called “Ratings & Reviews”. Check the box to enable entry reviews.
Displaying user ratings and reviews also allows users to make more informed decisions when browsing your directory, marketplace, or event catalog.
Restricting Your Views
The plugin allows you to edit capabilities, create new user roles and restrict content on your website based on parameters that you set.
If you want to make your View accessible only to certain user roles, then edit the page where your View is embedded and scroll down to the Content Permissions meta box. Here you can limit page access to users with specific roles.
Another way to restrict your content is by using a shortcode. To restrict access to your View, wrap the shortcode with the [members_access} shortcode.
Here’s an example of how it works inside the block editor.
Specifying role=”editor” means that our View is only visible to editors. Users with other roles will not be able to see it.
Display Gravity Forms Entries on a Calendar
Displaying Gravity Forms entries on a calendar is helpful for showcasing upcoming events. The Gravity Forms Calendar integration allows you to embed a calendar on a page, post, or inside a sidebar widget.
You can customize the layout by choosing one of four options:
You can also control which events show up on the calendar by pre-filtering entries.
Editing calendar entries from the front end is made simple with an intuitive drag and drop interface.
To display Gravity Forms entries on a calendar, first, download and install the Gravity Forms Calendar plugin by GravityView.
Next, navigate edit your Form in Gravity Forms and click Create a Calendar.
You will then need to configure a new Calendar feed by specifying which fields to include in your calendar, choosing a layout option, and selecting a color for your events.
You can also add navigation controls above or below your calendar. This makes it easy for users to check events on different dates.
If you decide to enable event editing, you can limit this functionality to specific user roles.
There’s also the option to add conditional logic to your calendar. This allows you to choose which entries are displayed based on conditions that you specify.
At the bottom of the page, you’ll see a preview of your calendar. Any changes you make to the layout, colors, or calendar controls will automatically reflect here.
Once your new calendar feed is set up, you can choose how you want to display the calendar on your website. There are four ways to display a Gravity Forms calendar:
- Embed the shortcode into a post or page
- Using the “GravityView Calendar” WordPress widget
- Adding the “GravityView Calendar” Gutenberg block to a post or page
Finally, if you already have GravityView installed, you can embed your calendar into a View using the GravityView “Calendar” widget.
Displaying Different Media Types
Along with a diverse set of layout options for creating powerful web apps GravityView also allows you to display different media collected via Gravity Forms such as video and audio links.
By using GravityView’s Custom Content field and enabling the “Render oEmbeds” option, you can turn YouTube, Vimeo, Spotify, and Soundcloud links into embedded video/audio players.
Pretty cool, right?
Displaying Gravity Forms Data From Multiple Forms
The Multiple Forms extension for GravityView makes it possible to combine data from multiple forms and display it inside a single View on the front end of your website.
For example, let’s say you have one form that collects contact information and another form that collects job information. You can join the forms together on a common field (e.g. “Name”) and then add information from both forms to your View.
Start by creating and publishing a new View. Then open up the Data Source meta box and click the button that says “Add Join Condition”. You can now select the form you want to join to and the field on which to join.
You can display connected values in one of two ways. Either you can show all fields from form A regardless of whether the field in form B has content, or you can only show entries from form A that contain values in form B.
Why You Should Use GravityView to Display Your Gravity Forms Entries
As you can see, displaying Gravity Forms data using GravityView is straightforward, without any unnecessary, technical steps.
GravityView’s drag and drop interface makes it easy for users to customize layouts without needing any coding skills. You can set up a directory or a database in only a few clicks!
GravityView’s range of add-ons allows you to extend its functionality, giving you the ability to create powerful and robust applications. Developers can also take advantage of GravityView’s actions and filters to create additional customization options.
Final Thoughts on Displaying Gravity Forms Entries
GravityView is a plugin that integrates seamlessly with Gravity Forms, allowing you to display entries on the front end of your website. Displaying Gravity Forms entries on your website allows you to build all kinds of diverse applications.
Business directories, marketplaces, store locators, and employee databases are just some examples of what you can build with GravityView!
GravityView comes equipped with multiple layout options, giving you control over how users view entries on the front end. Display entries in a list, a table, or on a Google Map!
Add custom content to your View using the Custom Content field and filter and sort your entries to create more advanced view configurations.
You can further customize your View by making use of GravityView’s library of powerful extensions. Add social sharing buttons, custom content, create featured entries, and more.
? Check our blog for more helpful guides and tutorials!