Creating an academic advisor directory

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

Last updated:

Categories GravityView

Tags , , , , , , , ,

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! Want to learn more about displaying Gravity Forms entries? Read Displaying Gravity Forms Entries: The Ultimate Guide