How To Build a Company Directory with GravityView

Putting a company directory on a website is extremely common. Most sites have an About page that contains photos and a short bio for each employee. Internal company directories will typically display even more information for each employee when you drill down to a single profile.

There’s plenty of different ways to build your company directory, including several dedicated directory plugins, but our absolute favorite method is to use GravityView. GravityView lets you build pages whose content is sourced from Gravity Forms entries. Using it, you can build a company directory that employees can add entries to using a Gravity Form on the front end. It even handles entry permissions, so you can let an employee edit their or profile without having access to anyone else’s.

In this tutorial, we’re going to show you how to build your business directory with GravityView. We’re going to then use Gravity Forms Media Library to automatically add photos in the directory to the WordPress Media Library, so the photos in the directory are properly sized. Let’s get started!

Getting Started

Installing GravityView

To start building your Gravity Forms Directory, you’ll first need to install GravityView, which is a WordPress plugin that will set you up with the functionality to generate pages from form submissions. GravityView also has a host of other useful functionality, including Google Maps integration, data tables, and shortcodes to enable you to put View widgets to display Gravity Forms entries anywhere on your site – including sidebars and headers.

To get started with GravityView, first pick up a license from the GravityView site. Then you can start the installation process:

1. Log in to your GravityView account, and click the “Downloads” tab.
2. Download the latest version of GravityView.
3. Log into your WordPress admin.
4. Navigate to the Plugins page and click the “Add New” button to the right of the page title.
5. You should now be on the “Install Plugins” page. Below the page title is a series of text links. It will start with “Search,” followed by “Upload”. Click the “Upload” link.
6. You will now see a file upload field. Click on this field, then browse to the GravityView zip file you downloaded to your computer and select it.
7. Click the “Install Now” button.
8. After the plugin has been installed, click “Activate Plugin”. This will take you to the Getting Started screen.
9. From here, click on “Settings”, enter your GravityView License Key into the License Key field, and click “Activate License”.
10. Your account details will now appear. Click “Save Settings” to complete the installation.

Plugin number one installed! Onto the next one…

Installing Gravity Forms Media Library

Gravity Forms Media Library is a plugin that enhances Gravity Forms with the ability to automatically import uploaded files (images, documents, etc.) to the WordPress Media Library when the form is submitted. This plugin is crucial for the smooth running of your company directory – without it, headshots uploaded by your company members won’t display correctly in your finished directory.

Gravity Forms Media library is just one of an entire suite of 33+ essential Gravity Forms add-ons called Gravity Perks.

To get up and running with Gravity Forms Media Library, you’ll first need to purchase a license. Then simply install it in the same way you did with the GravityView plugin:

1. Download the Gravity Perks zip file from the Account / Downloads page to your computer.
2. Log into your WordPress admin.
3. Navigate to the Plugins page and click the “Add New” button to the right of the page title.
4. You should now be on the “Install Plugins” page. Below the page title is a series of text links. It will start with “Search”, followed by “Upload”. Click the “Upload” link.
5. You will now see a file upload field. Click on this field, then browse to the Gravity Perks zip file you downloaded to your computer and select it.
6. Click the “Install Now” button.
7. After the plugin has been installed, the installation summary will offer an “Activate” link. Click this link to activate Gravity Perks.

Now that Gravity Perks is installed, you’re ready to start browsing the available Perks! If this is the first time you’ve installed Gravity Perks, you will see a little pointer indicating where you can find the “Perks” menu item under the Gravity Forms primary “Forms” navigation. Once you’ve dismissed this pointer, it won’t bother you anymore.

The “Manage Perks” page provides you a list of all of the perks you have currently installed. Go ahead and click on the “Add New” button to the right of the “Manage Perks” page title.

You will now be directed to the “Install Perks” page. All you need to do from here is select “Gravity Forms Media Library”…and voila! It’s that easy.

Each “perk” like Gravity Forms Media Library is a complete plugin in and of itself that adds new features to Gravity Forms – from generating unique IDs on Submission and adding eCommerce fields, to nested forms and dynamic field population! All the perks are managed seamlessly through one central Gravity Perks plugin. So when you purchase a Pro license for Gravity Forms Media Library, you’ll also unlock a complete wizard’s spellbook of brilliant new Gravity Forms plugins!

Once you have GravityView and GF Media Library installed, follow the steps below to build the necessary Forms and Views for your directory.

Steps

1. Build Personal Bio Form
2. Build The Multiple Entries View
3. Build the Single Entry View

Step 1 – Build Personal Bio Form

Start by building a Personal Bio form. Your employees will use this form to input their personal information. Add field types for all the relevant information you’d like to collect and make sure to include a File Upload field for a photo.

It’s important to note that when a file is uploaded to a Gravity Forms form field, it is stored in its original format. It doesn’t resize those files. The problem this introduces, particularly with a company directory where you might show 50 directory listings per page, is that your users might upload large photos of themselves. Loading all of those photos in the directory without pagination will increase load times significantly.

While you can specify a maximum file size in the field, requiring your users to resize the image before uploading can be problematic, and having to go through and edit entries manually yourself would be very time-consuming. GF Media Library resolves this issue seamlessly. It uploads files to WordPress’s Media Library, which automatically processes images and generates alternate smaller sizes. You can then use merge tags to show one of those smaller sizes in GravityView.

To activate GF Media Library on your File Upload file, navigate to the Perks tab and check Upload to Media Library.

Here’s what our Personal Bio form looks like on the front end.

Step 2 – Build The Multiple Entries View

With our Personal Bio form finished, it’s time to focus on building our View. The basic layout for our view is simple:

1. Insert the Name and Job Title fields into “Listing Title”.
2. Place Bio in “Other Fields”.
3. Use a Custom Content for the “Image”.
4. Add a Link to Entry in “Footer Right”.

With this layout, we’ll get a directory-style layout that a user can click on to view the full employee profile.

Adding the Profile Image the Right Way

Notice that we didn’t insert our File Upload field into the “Image” portion of the view. Instead, we opted for a Custom Content field. The reason for this is because we’re using GF Media Library to upload the photos to the WP Media Library, and instead of inserting the full-size image into the directory, we’re going to use a special merge tag modifier to output a specific size: {Photo:2:medium:link}. This modifier will output a smaller version of the image that is linked to the full-size picture.

Here’s what this View looks like on the front-end with this layout:

Step 3 – Build the Single Entry View

With the Multiple Entries View completed, it’s time to build the Single Entry View, which is the post type shown when the user clicks the View Details permalink.

The only difference between this View and the Multiple Entries View is the number of fields displayed. On this page, you can show every field from the Personal Bio form without cluttering the layout.

Here’s what this view looks like on the front end:

Get GravityView and Gravity Perks Today!

By now, you’ve seen how in only a few simple steps, you can quickly and easily build and edit forms to allow your employees to fill out an attractive company directory page, all using the power of Gravity Forms.

GravityView and Gravity Perks are essential tools in your Gravity Forms toolbox, and expand Gravity Forms’ functionality far beyond simple contact forms. Why give them a go today?