You have read a lot about Gravity Forms on our blog over the years. And although by itself it can do so much, when you add a plugin like GravityView to the mix, well, the world opens up.
I learned about GravityView shortly after it came out in 2014. In the meantime, a lot has changed and it was time to revisit it as an excellent option to display the data submitted through Gravity Forms on the front-end of your site.
GravityView: An Excellent Way to Display Your Gravity Forms Entries
In this post, I look at creating tables and lists using GravityView. At the end, I’ll show you their extensions and plugins, which I will be going over those in future posts.
The best way to demonstrate it is by using an existing form, one that makes sense to display on your site. This could be anything from a directory you are creating to RSVPs for an event. I’ll use the latter example.
My Gravity Form
Let’s say I am delivering a WooCommerce workshop that is free and I have a form where people can sign up to attend. The form looks like this:
And in the back end, I have all the submissions. I want to display who is attending on the same page as the form, but obviously I don’t want to show all their information; their email and website is only for my own knowledge.
Creating a View in GravityView
Now. le’ts create our view.
I can choose the data source and who will be able to access this. For the latter, I am making it for everyone, but this would also work as well for protected content for specific viewers.
I can choose either a Table View or a Listing View. I’ll keep this simple and go with the Table View but shortly I’ll give you an example of the Listing View as well.
Once I click this, I can configure my view.
I can add the widgets or fields to three areas for a multiple listing. If I start with the Entries Fields, by clicking on it I can add what I want to show in the table.
In this case, I want to add the full name, company and job title.
I can also add some cool widgets above and below the list. It gives me three areas in both cases.
Let’s add some to the Above Entries Widgets. In this top area, I am going to create a heading using the Custom Content widget.
In the left widget I am going to add both the Show Pagination Info and Page Links. I don’t have a lot of entries here; this would work best if you want to break up a longer list. You will also see the option Page Links. Since I don’t have numerous pages, I am going to toggle this.
In the other widget area, I am going to add the Search Bar widget.
Below are some other settings for view. For what I set up, I am going to set the number of entries per page as 5. There are also some slick settings to allow users to edit or delete any entries. You can also allow them to edit on specific fields. For example, their job title or some other field.
After you have saved, you have several options for the view.
The Front End View
This will create a new page to see the list and use as an attendee list page. In our example, I want to add this to the existing page where the form is.
You can easily get the shortcode from the View page, but you also have an easy Add View button added to your posts and pages.
Clicking on it, and choosing the view from a dropdown menu, let’s us place it anywhere on the page. You can also do some settings specifically for view on this page.
Here is the list now added to the page:
Listing View in GravityView
Here is an example of how we might create a Business Directory. We of course start with a form that collects the right info.
When we create our View, we get these options:
Like before, we can add widgets to the top or bottom of the entries here, as well as the listings themselves. For the listing, I will simply adding their photo, name, title and company:
Since this is a directory, I want people to be able to click through and see a single listing with the addition information which I would create by clicking on the Single Entry Tab. You can see all the highlighted info and a couple of additional View Settings for the single entry as well.
One last thing we need to do is create that link for the listing to the single listing. For example, if I go back to our Multiple Entries and click on the name field, I can toggle it to be the link to single listings.
Or if we wanted to, we could add a link in an area that is specifically that link.
And give it a title that explains more about it. Using a field tag, I can add the name.
And here is what the full listing would look like:
And if we click through to the single entry, it looks like this:
As you can see, with the ability to pull in date collected through a Gravity Form, you have a ton of options for what to display or not display, as well as some other cool features.
You may want the ability to edit entries on the front end, for yourself or the user. You can do this in a couple of ways.
On the single entry you can simply add the Entry Edit somewhere on the View.
We now find it at the bottom when viewing the entry:
If we click on that, now the entire entry opens on the front end of the site for editing.
Or maybe you want to allow the users to only change specific fields and for other changes, they must go through you. In that case, you can select certain fields. Let’s say you want to make the Bio editable.
You will go into your View and click on the Edit Entry tab. Here you can add any specific fields for editing capabilities.
Gravity View Extensions and Plugins
As I mentioned, I will be doing some additional posts on the plugins and extensions, but at least you can see what they are here and explore them further on their site. But even from this quick glance, you can see just how far you can take this plugin.
I could share dozens of other examples of how you could use this plugin to extend and display your Gravity Forms data, but I’m hoping this peek into the basics gives you a good idea of some of the things you can do. Like most things WordPress, all it takes it getting creative in your own thinking.
I would certainly check GravityView out and explore more of their site if you are a Gravity Forms user.