How to create student report cards using GravityView (with PDF export!)

Most schools send report cards home once a term or once a year, and most of them still go out on paper or as email attachments.

In this tutorial, we’ll build an online report card system with Gravity Forms and GravityView. Teachers fill in one form per report. Each student logs in and sees only their own report cards, and can download any of them as a PDF.

Sneak peek

Here’s what a finished report card looks like:

Clicking Download report card (PDF) creates a PDF copy of the same report:

What you’ll need

Here are the plugins you’ll need to follow along with this tutorial:

• Gravity Forms – the form teachers use to enter each report.
• GravityView Pro – turns the reports into report cards on the front end. Pro is needed for the Advanced Filtering extension, which keeps each student’s reports private.
• PDF for GravityView (optional, sold separately) – adds the PDF download link.
• Gravity PDF (free) – generates the PDFs, and is required by PDF for GravityView.

Creating the report form

To start, we need a form for teachers to enter a student’s grades. Hover over Forms in the WordPress admin menu and click New Form. After giving the form a name, you can start adding fields using the drag and drop form builder.

We’ll keep things simple with these fields:

• Student name (Name field)
• Student email (Email field)
• Grade (Drop Down field)
• Teacher (Drop Down field)
• School year (Drop Down field)
• Grades (List field)
• Teacher’s comments (Paragraph Text field)

The Student email field matters most. It holds the email address on the student’s website account, and later we’ll use it to make sure each student only sees their own reports. Unlike a name, an email address is unique to one student.

The List field is where the teacher records a grade for each subject. It works well here because the teacher can add and remove rows as needed. Click the field, then check Enable multiple columns in the field settings and add two columns: “Subject” and “Grade”.

When you’re done, click Save, then click Embed at the top of the editor to add the form to a new page. Here’s what the form looks like on the front end:

Pro tipOnly teachers should be able to reach this form. Make the page private, or restrict it to a teacher role with a plugin like Members.

Creating the View

Next, we’ll turn the form entries into report cards with GravityView.

1. Hover over GravityKit and click New View.
2. Give the View a name.
3. Select the Student reports form as the data source.

4. Choose a View type. We’ll use Table.

Configuring the Multiple Entries Layout

The Multiple Entries Layout is the list of a student’s report cards, usually one per school year or term. In the Entries Fields section, add the Student name, Grade, Teacher and School year fields.

Then add a Link to Single Entry field, so students can open the Single Entry page and read a full report. We relabeled it “Report” and changed the link text to “View report”.

You can also add widgets here. Click Add Widget above the fields, choose Search Bar, then click the gear icon to set up the search fields. We added one, so students can find a report by grade:

Configuring the Single Entry Layout

The Single Entry Layout is the full report card. Click the Single Entry Layout tab and add fields with Add Table Column: the student’s details first, then the Grades list and the teacher’s comments. The last field in the screenshot, “PDF copy”, is the PDF link we’ll add in a moment.

Showing each student only their own report cards

Right now, anyone who can see the View can see every report. We need a filter that shows each student only the reports written for them.

You might expect the Show only entries created by the currently logged-in user setting to do this, but here it doesn’t: teachers create these entries, so every report would count as the teacher’s. Instead, we’ll match the Student email field against the email address of whoever is logged in, using the Advanced Filtering extension in GravityView Pro.

1. Scroll down to View Settings and open the Filter & Sort tab.
2. Under Advanced Filter, click + Condition.
3. Set the condition to Student email is {user:user_email}.

The {user} merge tag is replaced with details about the logged-in user, and {user:user_email} is their email address. Logged-out visitors don’t have one, so they see no reports at all.

Pro tipThe filter applies to everyone, including teachers and admins. To give staff a list of every report, create a second View of the same form without the filter, and restrict it to staff.

Giving students an account

The filter only works if each student has a WordPress account with the same email address as the Student email field on their reports. There are two common ways to set this up:

• Add accounts yourself – Go to Users, then click Add User, and give each student the Subscriber role. This works well for a small class.
• Let students register – Build a registration form with the Gravity Forms User Registration Add-On, which creates an account for each student when they submit it. Our student registration tutorial walks through this.

Either way, use the same email address on the account and on the student’s reports.

Styling your report cards

By default, a View picks up your theme’s styles. Since GravityView 3.0, you can also give it a theme of its own. In View Settings, open the Styles tab and choose Vantage. That’s the look in these screenshots.

Click Update to save the View.

Adding a PDF download link

With PDF for GravityView and Gravity PDF installed, you get two new fields: Link to Single Entry PDF and Share Single Entry PDF.

1. Go back to the Single Entry Layout tab.
2. Click Add Table Column.
3. Choose Link to Single Entry PDF.

Click the gear icon to change the link text and label. We used “Download report card (PDF)” and relabeled the field “PDF copy”. For security, the links are signed and expire after a set time (one day by default), so a copied link stops working.

Then scroll down to View Settings and open the Single Entry PDF tab. Here you can set the file name, paper size, fonts and colors, and add a header, footer or background image. We chose Letter paper and added a header with the school’s logo and name.

Pro tipIf your first PDF fails with an error about a missing font, Gravity PDF’s core fonts aren’t installed yet. Go to Forms, then Settings, then PDF. Open the Tools tab and click Download Core Fonts. You only need to do this once.

To learn more, read Getting started with PDF for GravityView.

Want the PDF link to look like a button? Open the Custom Code tab in View Settings and paste this into the Custom CSS box. It uses the button colors from the Vantage theme you picked earlier:

VIEW_SELECTOR a.gravitypdf-download-link {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 6px;
	background: var(--gv-button-bg) !important;
	color: var(--gv-button-color) !important;
	font-weight: 600;
	text-decoration: none !important;
}

Adding the View to a page

Create a new page for students (we called ours “My report cards”). Click the + button, search for “GravityView” and add the GravityView View block.

In the block settings, select your View:

Publish the page, and your report card system is ready.

Report cards on the front end

When a student logs in and visits the page, they see a list of their own report cards:

Clicking View report opens the full report card, with the PDF link at the bottom:

Use Gravity Forms and GravityView to create student report cards

With one form and one View, teachers enter grades once, and each student gets their own report cards online, with a PDF copy whenever they need one.

If you found this tutorial useful, read our guide on building a student portal for assignment submissions next!