How to Build a Student Registration System on WordPress Using Gravity Forms and GravityView

Did you know that more than 15 million undergraduate students enrolled for college in the US in 2020?

Schools, colleges and other educational institutions all need a way to register new students, safely store their information, and update it when necessary.

In this tutorial, we’ll show you how to build a custom student registration system on WordPress using Gravity Forms and GravityView. We’re going to register students for courses and add them to a searchable database on the front end that admins and course conveners can access.

Let’s get started! 👇

Sneak Peek

Here’s a sneak peek at what we’re going to build in this tutorial:

As you can see, it’s a relatively simple database containing information about each newly registered student, including their signature which they must give when completing the registration form.

Clicking on the “View Details” link takes us through to the Single Entry page, where we can view each student’s “profile”:

When students register, they’ll receive account information, allowing them to log in and view (as well as optionally edit) their details from the front end!

What You’ll Need

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

• Gravity Forms
• GravityView
• Gravity Forms User Registration Add-On (optional)
• Gravity Forms Signature Add-On (optional)

We’re going to use Gravity Forms as our student enrollment solution, and we’ll use GravityView as our front-end user management system! 

Why Build a Student Registration System on WordPress?

If you’re looking to build a student registration system for your educational institution, WordPress may be the ideal platform on which to do so.

Who can benefit from having a student registration system?

• Educational institutions such as colleges and universities
• Schools such as primary or high schools
• Any individual or institution that runs online courses or e-learning programs

WordPress is ideal because:

• Using plugins, you can easily host online courses on WordPress
• Managing users and permissions is easy, and user registration is a built-in feature
• WordPress itself is free and easy to use for non-technical users

Investing in a WordPress plugin for student registration might not be the best move. Instead, we’ll show you how to build a student registration system using Gravity Forms and GravityView. 

(Optional) Installing Add-Ons

Depending on your needs, you may wish to install one or more Gravity Forms add-ons. Here are a couple of suggestions:

• User Registration add-on
  When users submit the registration form you can create them an account on your site (this is helpful if you’re hosting online courses on your site or you want users to be able to edit their details again later). The Gravity Forms User Registration add-on is a powerful way to control user registration in WordPress.

• Signature add-on
  The Signature add-on allows users to sign their registration form. This allows you to capture signatures that ensure students conform to any requirements your school/college may have. This may also help you eliminate paperwork.

To install an add-on for Gravity Forms, hover over Forms in your WordPress menu and click Add-Ons. Here you’ll see a list of available add-ons. Simply scroll down to your chosen add-on and click Install.

Now that you’ve installed the add-ons you need, you can start building your student registration form in Gravity Forms.

Creating the Student Registration Form

To create a new form in Gravity Forms, hover over Forms and click New Form. Now you can start adding fields to your form using the Gravity Forms drag and drop visual editor.

If you’re using the User Registration add-on, your form will need to have a Username and Email field. You can also add a Password field if you want to allow students to set their own passwords. 

For this example, we’ll keep things simple by adding the following fields to our form:

• Name (Name field)
• Username (Username field)
• Date of birth (Date field)
• Email (Email field)
• Phone (Phone field)
• Department (Dropdown field)
• Signature (Signature field)

If you’re using the Signature add-on, you can find the Signature field under the “Advanced Fields” tab.

Here’s what our student registration form looks like on the front end:

The Signature field provides a box where users can use their mouse to sign their signature. The Signature field also supports touchscreen for users on a mobile or tablet device.

Save time by downloading the free student registration form template now!

💡 Pro tip: If your student registration form is quite long (i.e., if it contains a lot of fields), consider creating a Multi-Page form.

Create the User Registration Feed

From inside the form editor, hover over Settings and click on User Registration. Now create a new User Registration feed by clicking the “Add New” button.

Now you can configure the User Registration feed. Start by selecting an action (this is the activity that happens when the user submits the form) – in this case, it should be “Create User”.

The next step is to map the various user-related fields to the relevant fields in your form. If your form doesn’t have a “Password” field, users can set their passwords via email link.

You’ll also need to select a user role for new registrants.

💡 Pro tip: You can use the Members plugin to manage user capabilities and create new, custom user roles. The Members plugin is an ideal plugin for WordPress user management.

Building the Student Database Using GravityView

Now that you have your student registration form set up, you can start building your student database using GravityView. GravityView’s Table layout will allow you to create a powerful database for WordPress user management.

Creating a New Table View

Hover over Views and select New View. Now give your View a name and select your user registration form as the data source. Now you’ll need to choose a layout. For a database application, it’s best to select either the Table or DataTables layout. 

For this example, we’ll go ahead and select the “Table” layout.

After choosing your layout, you can start constructing your View using GravityView’s drag and drop builder.

Adding Fields to Your Student Database View

Start by adding columns to the Multiple Entries Layout – this is the main table where each of your students will be displayed, one after the other. To add a new field, click on the “Add Table Column” button. Each field you add will display as a column in your table.

Here we’ve added the Name, Date of birth, Department and Signature fields. You’ll notice there’s also another field labeled “Details”. This is the field that will link through to the Single Entry page, allowing us to display additional information about each student. Think of the Single Entry page as a student’s “profile” page.

We’ll get back to the Single Entry Layout soon, but before that you may want to add widgets to your View.

Adding Widgets

Widgets are tools that help users navigate your View. In this example, we’ll add an “A-Z Filters” widget at the top, allowing Admins to filter students by the first letter of their first or last name.

To add a new widget, click on the “Add Widget” button. GravityView support multiple widgets including a Search Bar, Page Links, Custom Content and even a Gravity Forms widget. If you want to use the A-Z Filter, you’ll need to install the A-Z Filters extension.

Here’s what our student database looks like on the front end.

Okay, now that you’ve finished configuring the Multiple Entries Layout, you can start adding fields to the Single Entry page.

Configuring the Single Entry Page

Head back to the View editor and click on the Single Entry Layout tab.

Now you can start adding fields here to show additional information about each student. Here’s what our Single Entry page looks like on the front end:

So far, we’ve created a student registration form and built a database to house student information. There’s one more (optional) step, which is to configure the Edit Entry Layout and allow students to update their information from the front end.

(Optional) Allowing Students to Edit Their Information From the Front End

This step is optional because you may only want Admins to be able to update student information. However, if you would like students to be able to edit their own information from the front end, enable “User Edit” by scrolling down to the View Settings, clicking on “Edit Entry” and checking the box that says “Allow User Edit”.

The next step is to click on the “Edit Entry” tab at the top and configure the Edit Entry Layout. The fields you add here will be editable from the front end.

That’s it! You’ve successfully built a custom user registration system on WordPress using Gravity Forms and GravityView. 

Bonus: Segmenting Students by Course

If you are enrolling college students for different courses, you may want a way to segment users by course. You can accomplish this using our Advanced Filtering extension.

The Advanced Filter allows you to filter the entries in your View using one or multiple conditions. To only display students who registered for courses in the Engineering department, we would add the following condition:

💡 To learn about the Advanced Filtering extension, check out our documentation.

Build Your Student Registration System Now

Having a student registration system is important for schools, colleges and other educational institutions.

In this post, we showed you how to build a student registration on WordPress using Gravity Forms and GravityView. First we created a student registration form and then we built a custom database to store and display student information.

If you’re interested in using Gravity Forms to build powerful front end applications, check out GravityView today!