--- title: "How to make an Academic Advisor directory with Gravity Forms and GravityView" date: 2018-10-23 author: "Kiefer Szurszewski" link: "https://staging.gravitykit.com/how-to-make-an-academic-advisor-directory-with-gravity-forms-and-gravityview/" --- # How to make an Academic Advisor directory with Gravity Forms and GravityView *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.](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/?p=576497) 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.](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/?p=575446)--- 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/00-3-896x1024.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/01-2-221x400.png) *Then, title your form "Submit a New Academic Advisor." !*[Form Name](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/02-3-1024x865.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/03-3-1024x319.png) For *Job Title,* let's use a *Single Line Text* field, which you can find under *Standard Fields.* ![Job Title](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/04-3-1024x466.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/student-database-04.png) For *Email*, let's use the *Email* field, found under *Advanced Fields.* ![Email](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/05-3-1024x472.png) For *Phone Number,* we'll use the *Phone* field, also under *Advanced Fields.* ![Phone](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/06-3-1024x267.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/08-3-1024x290.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/09-3.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/10-3-1024x470.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/11-4-1024x448.png) *Now save and preview your page. ![Form](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/12-3-852x1024.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/11-3.png) Title your view "Academic Advisor Directory" and choose the form we created (*Submit a New Academic Advisor*) as your Data Source. ![Data Source](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/13-3-1024x497.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/14-3-1024x598.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/15-3-1024x525.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/16-3-1024x481.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/17-3-1024x441.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/20-3-1024x503.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/18-3.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/19-4.png) Let's finally take a look at our view to see how it looks. ![Final View](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/21-3-976x1024.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/22-3-1024x966.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/23-4-1024x728.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/24-2-1024x795.png) *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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/25-1-1024x184.png) 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/wp-content/uploads/2018/09/26-2-1024x335.png)--- 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](https://cf61600d-90c1-49ac-b4a6-d97914c46f41.cv03.conves.io/displaying-gravity-forms-entries/)