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.
In this post, we’ll walk through creating a student database. Here’s what our final product will look like (using the default Twenty Seventeen theme):
Here’s what it will be able to do:
- View all student profiles at once
- Search and filter through student profiles
- View a specific student’s profile
- Automatically filter through students
- Allow administrators to modify student information directly on the front end of the website
Let’s get started!
Step 1: Create a Submission Form
First, we’ll need to create a form in Gravity Forms for adding new students. To do this, go to Forms > New Form on your WordPress Sidebar.
Tip: Already have a directory file of students? Not to worry. Importing it into Gravity Forms and GravityView is super simple with our Import Entries plugin. You can import CSV files in seconds.
Give your form a title – let’s call it Add a New Student to the Database.
Now we need to add the relevant fields. These will depend on the nature of your school (university vs. elementary school, etc.) Some common options include:
- First and Last Name
- ID Number
- Date of Birth
- Year of Graduation
- Locker Number
- Enrolled Courses
…and so on.
Let’s add all of the listed items above to our form. To add a field to your form, simply drag it to the left. You can also just click the field to add 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.
For First and Last Name, add the Name field, which is under Advanced Fields.
For ID Number, we can add a Number Field, which is under Standard Fields. If your ID number includes letters or other non-numeral symbols, you’ll need to use a Single Line Text field.
Once you add a Number field, click on it to edit its options. Rename it to “ID Number.”
For Email we’ll use the Advanced Field, Email.
For Photo, we’ll use a File Upload field, which is under Advanced Fields. Once you add it, click on it to change a few options:
- Rename it “Student Photo”
- Type “png, jpg, jpeg, gif” into the Allowed file extensions option. This will only allow users to upload image files (and not other types of files.)
- Type a number into Maximum File Size option. Typically, an image should not be more than 10-15 MB.
For Date of Birth, we’ll add a Date field, which is under Advanced Fields. Rename the field to “Date of Birth.” We’ll change the date format to be yyyy/mm/dd. You can also add a calendar icon, if you wish.
For Graduation Year, we’ll add a Radio Buttons field, which is under Standard Fields. Rename it and add an option for every graduation year. To be safe, add at least 10-15 years into the future. Alternatively, we could use another Date field. This will future-proof your field at the cost of being more cumbersome to use.
For Locker Number, we’ll add a Number field and rename it.
For Department / School, we’ll use a Checkbox field. This will allow students to belong to multiple departments or schools. For example, a university student may be a double major in Biology and Philosophy, and thus would belong to the “School of Sciences” and the “School of Humanities.” Be sure to add all of your school/university’s departments.
For Major, we’ll add another Checkbox field. Just like the Department field above, this will allow a student to have more than one major.
Finally, for Enrolled Courses, we’ll use a Checkbox field. This will allow an administrator to add a student to multiple courses.
Want to only display a particular field if a certain option is selected? For example, you may want to create a specific Enrolled Courses field for each major, rather than have all the courses for all majors listed in one field. That way, only the relevant course options will be displayed.
To do this, you’ll need to use Conditional Logic. First, go to the field that you want to be “activated” only under certain conditions. For example, this may be the Major: Medicine – Enrolled Courses field. Under the Advanced tab, check the box next to Enable Conditional Logic.
You can now choose when this field will be displayed (or hidden). For our example, choose Major + is + Medicine. Now, this field will be hidden until the Medicine choice is selected for the Major field.
You can create complex logic trees using this functionality.
Press update to finalize and save our form. As a final step, you’ll want to add this form to a page. To do this, create a WordPress page and click Add Form.
Now that we’ve created the form, let’s see what it looks like!
Looks good! If you test it out, you’ll see that the Enrolled Courses: Medicine field is using the conditional logic we set up.
Tip: You will want to change the confirmation message. You can do this on the Settings page of your form.
Part 2: Creating a View
Note: For this part, we’ll assume that you have already added a number of students to your database.
Now that we have a form, let’s create a View. A View will allow us to display Gravity Forms entries on the front end of our website, without having to log into the back end.
To start, go to Views – New View on your WordPress sidebar.
Let’s call our View “Student Database.” Under Data Source, select the form we previously created – Add a New Student to the Database.
Then, we need to choose a View Type. For our purposes, we want either a Table layout or a Listing layout. The table layout will display all of our entries (students) on one page, in a table, while the Listing layout will display each student individually in a listing. Unless you have very few students, you’ll probably want to use the Table layout.
Now we’re on the View Configuration page. Here’s what we want to create:
- A Multiple Entries page, where we can view, search, and filter through student profiles
- A Single Entry page for each student, where we can see all the details (fields) of a particular entry (student)
- The Edit Entry page, where we can modify the details of a particular entry (student)
Let’s start with the Multiple Entries Context. At the top, under Above Entries Widgets, we want to add some widgets. Click Add Widget and then click on each item to add it to the View. Note that you can also add widgets below the Entries (in the Below Entries Widgets section).
You can customize how it looks by adding it to the Top, Left or Right area.
Show Pagination Info
This will show us how many student entries are currently visible. For example, 20 of 1,000
This will add navigation links to multiple pages
This will let us search through the database for a particular stduent
A-Z Entry Filter
This will let us filter students by their first or last name
Once we add the widget to the View, you can customize its options by clicking on the blue gear icon. Depending on what functionality you need, there are many possibilities:
- Edit the Page Links widget to enable show each page number, rather than a summary (e.g. 1 2 3 … 8)
- Edit the Search Bar widget to customize what is searched through. By default, it will search through all fields. However, you may want to specify it to only search through a particular field, like Name. You probably also want to change “Search Entries” to “Search Students”
- Edit the A-Z Entry Filter widget to choose which field will be used for alphabetization. You will likely want to select Last, the field for Last Names
Once you’re done adding widgets, scroll down to Entries Fields. This is the main part of our student database. Since the Multiple Entries context is only a broad overview of the students, we’ll only want to add a few specific fields. (We’ll add all of the detailed fields to the Single Entry Context.)
For this example, we’ll add the following three fields:
- ID Number
- Department / School
Then, click on the blue gear icon next to the Name field. Enable Link to single entry at the bottom. This will allow us to click on the student’s name and see their details.
Our Multiple Entries context should now be good to go!
Finally, let’s scroll down to the View Settings at the bottom of the View. There are a lot of options here for customizing your View. For our purposes, there are a handful of settings we should be aware of:
- Under View Settings, you should enable Prevent Direct Access. If you enable this setting, the View will only be accessible on pages where you specifically embed it via a shortcode. This is very important if you want to keep your View private or restricted to particular users.
- Under Filter and Sort, we can customize our filtering options. This is useful if you want to sort students by a particular field by default (like Last Name). You can also enable sorting by column, which will let you sort students by a field displayed in the View by clicking an arrow. In our example, you can sort the students by Name, ID Number, or Department / School.
Now, let’s take a look at our View! Press Publish and then View on website after the page reloads.
As you can see, our students are now listed in the database.
- We can click on a letter to filter them by name
- We can search through the students
- And we can click on different page numbers.
If you click on a student’s name, you’ll be taken to the Single Entry page. Since we haven’t set this up yet, we’ll do it now! Click Add fields to Single Entry.
On the Single Entry Context, we want to add all the details of a specific student:
Once you’ve added the fields, click Update and then View on website. Now click on the name field for an entry. As you can see, our Single Entry Context now displays all of the information about our student.
Note: If you used conditional logic to create specific fields earlier, be sure to add all of these fields to the Single Entry View. By default, empty fields will be hidden. This means that the field will only be displayed if it has content.
Finally, the Edit Entry page lets administrators change the content of an entry’s fields. An “Edit” link is at the bottom of the Single Entry page by default.
That about covers our guide! If you enjoyed this walkthrough, check out some of the other posts in our blog.