Are you looking for a way to create Gravity Forms tables?
Tables are useful for displaying and visualizing information, especially when you have more than one set of values that share a direct relationship.
In this post, we’ll show you how to add a table to a form using the List field, and we’ll also show you how to display your form entries in a table using GravityView. Let’s get started! 👇
Sneak Peek at the Gravity Forms Entries Table
Here’s a sneak peek at what we’re going to build in this tutorial. As you can see, it’s a table containing student registration data that was collected using a Gravity Form.
Can You Make a Table in Gravity Forms?
Yes, you can create tables in Gravity Forms!
If you want to create a table of values within the form itself, this is possible using the Gravity Forms “List” field (see below). However, if you want to display form entries in a table, you’ll need to use a third-party plugin.
There are three plugins that allow you to display Gravity Forms data in a table – GravityView, wpDataTables and GP Entry Blocks. The most powerful of these is GravityView because it’s built specifically for this purpose!
💡 Pro tip: To see a comparison between GravityView, wpDataTables and GP Entry Blocks, read: Looking for the Best GravityView Alternative? You May be Surprised.
How Do You Make a Table in Gravity Forms?
It depends on what kind of table you’re wanting to construct. If you want to add a table with multiple columns to your form, you can achieve this by using the Gravity Forms “List” field. However, if you want to create a table of Gravity Forms entries, you’ll need to use GravityView.
We’ll show you both ways in this post!
Creating a Gravity Forms Table Inside a Form Using the List Field
To add a table to your form, navigate to the Gravity Forms visual form editor. Now, open the “Advanced Fields” tab on the right and add a “List” field to your form by dragging and dropping it into place.
The List field in Gravity Forms allows users to add/remove additional input rows up to some fixed amount. The “List” field also supports multiple columns, meaning that you can use it to create tables.
To enable multiple columns, open the field settings and check the box that says “Enable multiple columns”.
Here’s what the “List” field looks like on the front end, with three columns. By clicking on the ‘+’ icon, users can add extra rows.
Here’s what it looks like after adding extra rows and filling out the data:
As you can see, enabling multiple columns on the List field allows users to create tables of information. But what if you want to display form entry data in a table? That’s where GravityView comes in.
Creating a Gravity Forms Table of Entries Using GravityView
GravityView is an add-on for Gravity Forms that allows you to display your form data on the front end and build powerful CRUD applications. GravityView includes several preset layouts for displaying entries in a list, or in a table.
Why Display Gravity Forms Data in a Table?
Extracting data from Gravity Forms and displaying it in a table allows you to create front end databases, directories and other applications using your form data.
GravityView also gives users a way to search, sort and edit entries without needing to be logged in as an admin. This provides added security, ensuring that users never see the backend of your site.
Creating a View Using the Table Layout
For this tutorial, we’ll assume that you already have a form set up with entries.
After you’ve installed GravityView on your site, create a new View by hovering over Views and clicking New View. Now give your View a name and select a data source.
The data source is a form in Gravity Forms containing the entries you want to display. For this example, we’ll select the “Student registration” form.
The next step is to choose a View type. GravityView includes several layout options, allowing you to display data in different ways. The layout you choose will depend on the type of app you want to build.
To display your data in a table, go ahead and select the “Table” layout. You could also select the DataTables layout (this requires you to have a Core + Extensions license).
After selecting the Table layout, you’ll be taken to the View editor, where you can start adding columns and widgets to your table using GravityView’s visual builder.
Adding Gravity Forms Fields to the Table
In the View editor, you’ll see there are two widget areas at the top and bottom, and a space to add fields in the middle. Widgets are tools for navigating your View and searching for entries (such as a search bar). Fields, on the other hand, represent the form data you want to display.
Each new field you add will show up as a new column in your table.
To add a new field, simply click on the “Add Table Column” button and select the field from the list.
Editing Column Headings and Visibility Settings
After adding a new field to your table, you can click on the gear icon to open the field settings.
Here you’ll find several options for updating the field label, changing the visibility settings, and more. By default, the field label will be the same as the one used in your form. However, you can change it by checking the box that says “Show Label” and adding in your own, custom label text.
You can also update a field’s visibility settings, so that it’s only visible for logged-in users or users with specific roles.
💡 Pro tip: Check out the GravityView Advanced Filtering extension for more ways to filter entries in a View using conditional logic.
Embedding Your Gravity Forms Table on a Page or Post
After configuring your table, the final step is to embed it on a page or post on your website. You can do this using the GravityView embed shortcode.
All you need to do is paste the shortcode inside a WordPress Shortcode block.
Here’s what our Gravity Forms table looks like on the front end:
💡 Pro tip: Read our comparison of GravityView and TablePress to see which plugin is best for creating tables of data.
Create Tables Using Your Gravity Forms Entry Data
Tables are useful for displaying and visualizing information, especially for multiple value sets that share a direct relationship.
In this post, we showed you how to add a table to your forms using the Gravity Forms List layout. We also showed you how to create a Gravity Forms table of entries using GravityView.
In you found this post helpful, subscribe to our newsletter below so we can notify you when we publish new content! 👇