How to make an Academic Advisor directory with Gravity Forms and GravityView

Easily add and display your advising staff on your website

Written by Kiefer Szurszewski

Categories How-To

Tags , , , , , ,

Creating an academic advisor directory

On our blog, we recently featured a case study of one of our users, Adam Cavotta, who is a Senior University Training Specialist at New Mexico State University. NMSU uses GravityView in nearly 10 different ways. In this ongoing blog series, we’ll teach you how to create similar applications for yourself.

Want to read more about using GravityView at universities, schools, and other educational institutions? Check out our guide.


If you’re a university, or other educational institution, you no doubt have a team of academic advisors. Why not make a directory for them like New Mexico State University’s, featured above? In this guide, we’ll walk you through making a directory for yourself.

Here is what our final application will look like:

Academic Advisors

Let’s get started!

Step 1: Create the form

First, we need to make a form for submitting a new academic advisor. To do this, go to Forms > New Form on your WordPress sidebar.

New Form

Then, title your form “Submit a New Academic Advisor.”

Form Name

Now we need to add fields to our form. We need the following information about our advisors:

  • Name
  • Job Title
  • Email
  • Phone Number
  • Photo
  • Office Address
  • About / Biography

Let’s add a field to our form for each of these items.

For Name, we can use the Name field, which is under Advanced Fields.

Name

For Job Title, let’s use a Single Line Text field, which you can find under Standard Fields.

Job Title

Click on the field to rename it.

Tip: Want to make sure that all of the fields are filled out? Be sure to enable “Required” at the bottom of each field.

Student Database 04

For Email, let’s use the Email field, found under Advanced Fields.

Email

For Phone Number, we’ll use the Phone field, also under Advanced Fields.

Phone

For Photo, we’ll need to use a File Upload field and customize it.

  • Rename the field to “Photo”
  • Type jpg, gif, png, pdf into the Allowed File Extensions setting. This will restrict uploads to only these file types.
  • Type a number into the Maximum File Size setting. Typically, an image should not be more than 5-10MB.

For Office Address, we can use the Address, under Advanced Fields.

Address

Once you add the field, you can customize how specific you want the address to be. For example, if your directory is for a single college campus, you can probably restrict the input to only Street Address. Alternatively, if you have multiple offices scattered around many cities or countries, you can include the City and Country options.

Address Options

Finally, for About / Biography, we want to use a Paragraph Text field. You can customize the size of the text input area under the Appearance tab.

About

All that’s left to do is add our form to a page. But first, save your form by clicking Update! Create a new WordPress page and give it a title. Add your form by clicking the Add Form button.

Add Form

Now save and preview your page.

Form

Our form looks good! Now we need to build the view.

Step 2: The View

Note: For this part, we’ll assume that you have already submitted a number of entries via your form.

The view is the main part of our application. It will allow us to “view” the academic advisor directory on the front end of our website, without requiring the user to log in.

To create a view, first go to Views > New View on your WordPress sidebar.

New View

Title your view “Academic Advisor Directory” and choose the form we created (Submit a New Academic Advisor) as your Data Source.

Data Source

Now choose a layout. Let’s use a List layout, as we want to display more information about each advisor.

If the physical location of your academic advisors is important, you can also use the Map view. This will display your entries on a map according to their Address field.

List View

Now we’re on the View Configuration page. Let’s start by customizing the Multiple Entries page.

At the top, let’s add a Search Bar widget.

Search Bar

We want to rename it, as “Search Entries” sounds a little impersonal. To do this, click on the blue gear icon next to the field. Then, rename it “Search Advisors”.

Search Options

At the bottom, under Below Entries Widgets, let’s add Show Pagination Info to the left and Page Links to the right. These will show how many entries are displayed on this page and links to other pages, respectively.

Below Entries Widgets

Now scroll back up to the Entries Fields section. To add a field, click +Add Field next to the specific section.

  • For Listing Title, select the Name field
  • For Subheading, select the Job Title field
  • For Image, select the Photo field
  • Under Other Fields, add About / Biography
  • Under Footer Left, add Office Address
  • And Under Footer Right, add Email and Phone

Entries Fields

We want to remove the labels for each of these fields. Why? Because the field content is already obvious – we don’t need to label someone’s name or their photo.

To remove a label, click on the blue gear icon next to a field. Then, uncheck Show Label. Repeat this process for all of our fields.

Show Label

By default, the Address field will have a Map It link beneath the field content. This link opens the address in Google Maps. To remove it, uncheck Show Map Link in the settings.

Show Map Link

Let’s finally take a look at our view to see how it looks.

Final View

Pretty snappy!

The Single Entry View

What if we want to add more information about an advisor on their own, individual page? Or what if an advisor’s “About Me” is too long to easily fit in the Multiple Entries page? Then we need to use the Single Entry view.

Start by clicking on the blue gear icon next to the Photo field. At the bottom, enable Link to single entry. Do the same thing for the Name field.

Link to single entry

Now both the advisor’s photo and name will link to their single entry page. When a user clicks on their photo or name, they will be taken to a more detailed page – the Single Entry page.

You may also want to limit the number of words shown in the About/Biography field on the Multiple Entries page. For example, their biography may be thousands of words long. To do this, edit the field and type in a number.

Maximum words

Now let’s edit the Single Entry view context itself. Click on the Single Entry tab. The layout is essentially the same. We simply have more space.

  • For Listing Title, select the Name field
  • For Subheading, select the Job Title field
  • For Image, select the Photo field
  • Under Other Fields, add About / Biography
  • Under Footer Left, add Office Address
  • And Under Footer Right, add Email and Phone

Remember to uncheck the Show Label option for all of the fields. If we had more fields, we could add them here too.

Save and preview your view. Click on an advisor’s photo or name and you’ll see their single entry page.

Single Entry View

Everything looks as it should! At the bottom of the entry, you’ll also see an Edit Entry button. If you click on it, you’ll be taken to the Edit Entry page, where you can edit the fields of the entry.

View Settings

Finally, let’s briefly talk about the View Settings panel at the bottom of the View Configuration screen. There are many settings here, but only a few are directly relevant to our current project.

Number of Entries Per Page

Under View Settings, you can choose how many entries will be displayed per page.

Number of Entries

Under Filter and Sort, you can choose how the entries will be displayed. By default, they will be displayed in order of their date created (newest to oldest). Let’s change them to be ordered by last name. To do this, select Last under Sort by field.

Sort by Field


That just about covers our guide to building an Academic Advisor directory! Have you built a similar application with GravityView? Let us know!