How to build a milti-column member directory using GravityView

How to build a member directory on WordPress without code

Written by Casey Burridge

Last updated:

Categories GravityView

Tags , , ,

Looking for an easy way to create a sleek, searchable member directory for your website? With GravityView, you can turn Gravity Forms entries into a fully functional directory—no coding required!

In this tutorial, I’ll walk you through the entire process of building a dynamic member directory, complete with a clean grid layout. Whether you’re managing a community or professional network, you’ll be able to set up your own directory in no time.

Let’s dive in!

💡 Check out a live demo of the finished member directory and get your own free trial site preloaded with all GravityKit add-ons!

Sneak peek

Here’s a sneak peek at our finished member directory:

A directory showing member profiles in a 4-column grid

Clicking on the “View Profile” link enables you to see more information about a specific member:

A single memnber profile page; here you can see the name, job title, email, social links and bio of the person.

Ready to see how I built it? Keep reading.

What you’ll need

Here are the plugins you’ll need to create a member directory like the one in this example:

Creating the member registration form

To start off, we’ll create a new form on our website that enables users to register their profile on our directory.

To create a new form in Gravity Forms, we’ll hover over “Forms” and click “New Form”. After giving our form a name, we can start adding fields to it using the drag-and-drop form builder.

The Gravity Forms drag and drop form builder

We’ll keep things simple by adding the following fields to our form:

  • Name (Name field)
  • Email (Email field)
  • Job Title (Single Line text field)
  • Bio (Paragraph Text field)
  • Profile Picture (File Upload field)
  • LinkedIn Profile (Website field)
  • Facebook Profile (Website field)
  • Twitter Profile (Website field)
  • Username (Username field)
  • Password (Password field)

The “Username” and “Password” fields are special fields added by the User Registration add-on.

Creating the User Registration feed

The next step is to create a User Registration feed so that we can register a new user on our site when they submit their information for the directory. To do this, we’ll navigate to the form settings page, select “User Registration” on the left and click “Add New”.

Now we can configure the feed settings. First, we’ll set the action to “Create User”. After that, we’ll need to map the various user meta fields to the relevant fields in our form and select what role the new user will be assigned.

After configuring the User Registration feed and embedding our form on a page or post, we’re ready to move on to the next step—creating the member directory using GravityView!

💡 Pro tip: You can learn more about the Gravity Forms User Registration add-on by reading this helpful doc.

Creating the member directory in GravityView

To create a new View in GravityView, we’ll hover over “Views” and click “New View”. Next, we’ll give our View a name (“Member Directory”), choose a data source and select a View Type.

For this example, we’ll select “List” as our View type as it’s well suited to creating directory-style layouts!

The GravityView View creation screen;

Configuring the Multiple Entries Layout

After selecting a View Type, we can start configuring our View using GravityView’s drag and drop builder.

We’ll start by configuring the Multiple Entries Layout. This is our main directory page, so we can add both fields and widgets here. Widgets are tools for navigating a View while fields are the information we want to display.

We’ll start by adding a Search Bar widget to the Top Widgets area. We can do this by clicking the “Add Widget” button and selecting the Search Bar widget.

The 'Add Widget' button in GravityView

💡 Pro tip: Click on the gear icon to configure the search settings. This allows you to add search inputs and modify the search behavior. To learn more about the GravityView Search Bar widget, read Configuring the Search Bar.

Next, we’ll scroll down and start adding fields to the Entries Fields section. We’ll add the “Profile Picture” field to the Listing Title section, and we’ll add the “Name” and “Job Title” fields to the Subheading section.

Finally, we’ll also add a “Link to Single Entry” field. This will output a link, allowing users to click through to view more information about a particular member.

The GravityView drag and drop editor showing fields added to the Listing Title and Subheading sections

Configuring the Single Entry Layout

Now let’s turn our attention to the Single Entry layout. This is the layout for individual member profiles. To start, we’re going to change the View type from “List” to “Layout Builder”. This gives us more control, enabling us to create a custom profile layout with rows and columns.

The GravityView Single Entry Layout page; there's an arrow pointing to the View type switcher

First, we’ll add a new row with three columns (25%, 50% and 25% width respectively). Underneath that, we’ll add a second row with a single column of 100% width.

The Layout Builder's 'add row' feature

Now we can construct our profile layout by adding our form fields. I’ll add the “Profile Picture” field to the upper left column, the “Name”, “Job Title” and “Email” fields to the center, and the social links to the right-hand column. Finally, I’ll add the “Bio” field to the bottom row.

Here’s what the individual profile pages look like on the front end:

A single memnber profile page; here you can see the name, job title, email, social links and bio of the person.

Configuring the Edit Entry Layout

Finally, we’re going to configure the Edit Entry Layout to enable logged-in users to edit their profile pages. First, we’ll add a “Link to Edit Entry” field to the Single Entry page.

An arrow pointing to the 'Link to Edit Entry' field in the View editor.

Next, we’ll click on the “Edit Entry Layout” tab at the top of the View editor. Here, we can specify which fields are editable from the front-end by adding them to the layout!

The 'Edit Entry Layout' screen in the GravityView editor

Finally, we’ll scroll down to the View settings, click on “Edit Entry” and enable User Edit.

A checkbox labeled 'Allow User Edit'

Now, when a user is logged in, they can go to their profile and click “Edit Profile” to update their information.

An 'Edit Profile' link underneath the bio section of a member's profile

Here’s what the Edit Entry page looks like on the front-end:

The GravityView Edit Entry layout (front-end view); there are several editable fields visible, including the name, email address and more.

We’re almost done! There’s only one thing left to do—change our View from a list to a grid!

Adding custom CSS to create multiple columns

On the Multiple Entries Layout, we’re using the “List” View type, which, by default, displays entries in a single column. Using a short CSS snippet we can change this to a grid. You can copy/paste the code below, just make sure to replace the {viewID} with your actual View ID.

.gv-list-multiple-container.gv-container-{viewID} {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.gv-list-multiple-container.gv-container-{viewID} .gv-list-view {
    margin-right: 10px;
    width: 250px; /* Adjust this width */
}

We can add this code to the “Custom CSS” box in the View settings.

The 'Custom Code' settings

That’s it! Let’s take a look at our member directory on the front end:

A directory showing member profiles in a 4-column grid

Create your member directory today!

GravityView is a powerful add-on for Gravity Forms that enables you to display form entry data on the front-end and build powerful web applications! Not only can you create member profiles and directories, you can also build custom layouts for your data using drag and drop.

If you found this post helpful, check out more of our how-to guides! Otherwise, if you’re ready to get started, get GravityView today.

Helpful tips right in your inbox.

Subscribe to our weekly newsletter for tips, special offers, and more!

Helpful tips right in your inbox.

Subscribe to our weekly newsletter for tips, special offers, and more!