The Bundle Up! Black Friday Sale Is Live!
Countdown timer
How to build a Gravity Forms business directory

How to Build a Business Directory With Gravity Forms

Written by Casey Burridge

Last updated:

Categories How-To

Are you planning to build a Gravity Forms business directory? You’ll need a robust, flexible plugin that allows you to display listings on the front end.

There are plenty of dedicated WordPress directory plugins available on WordPress.org, but none of them allow you to build a directory using Gravity Forms.

That’s where GravityView comes in. GravityView is a powerful add-on for Gravity Forms that allows you to display your form entries on the front end for use in powerful applications. Using GravityView and Gravity Forms, you can build a custom business directory without writing any code.

With preset layout templates, a drag and drop builder, and a range of powerful extensions, GravityView is the ultimate Gravity Forms directory add-on!

In this post, we’re going to show you how to build a Gravity Forms business directory using GravityView. We’ll also show you how to extend your directory by integrating it with Google Maps, charging for featured listings, and more!

Taking a Sneek Peak at the Finished Directory

Here’s is a quick look at the directory we’re going to build in this tutorial 👇

Gravity Forms business directory listings displaying on the front end

What Is a Business Directory?

A business directory is a website that helps users find businesses in different industries. Business directories display relevant information such as the services offered by the business, the location of the business, and the business’s contact details. 

Building a business directory is a great way to promote local businesses and make an extra income by charging companies to post listings.

Getting Started With GravityView

GravityView is an add-on for Gravity Forms that allows you to display form entries on the front end of your website. GravityView is a multi-purpose plugin that allows you to build all kinds of Gravity Forms-powered applications.

Due to its functionality, GravityView is also the ultimate Gravity Forms directory plugin. 

Installing GravityView

To get started with GravityView, first, get yourself a plugin license from our website. Next, download the plugin ZIP file from your Account page and install it on your WordPress website by following the steps below.

Step #1 – Log in to your WordPress website, hover over Plugins and click Add New.

An arrow pointing to the Add New link underneath Plugins in the WordPress admin menu

Step #2 – Click Upload Plugin.

The Upload Plugin button

Step #3 – Click Choose File and select the GravityView plugin file that you downloaded previously. 

An arrow pointing to the 'Choose File' button

Step #4 – Click Install Now.

The Install Now button

Step #5 – Click Activate Plugin.

The Activate Plugin button

After installing GravityView, the next step is to create a listing form that allows organizations to submit their business profiles.

Creating the Directory Listing Form Using Gravity Forms

To create a new form in Gravity Forms, hover over Forms and click New Form. After giving your new form a name, you can start adding fields to it using the drag and drop form builder.

Make sure to add fields for all the relevant information that you want to display in your directory. For this example, we’ll add the following fields:

  • Business Name (Single Line Text)
  • Business Summary (Single Line Text)
  • Business Description (Paragraph)
  • Address (Address Field)
  • Business Phone (Phone)
  • Business Email (Email)
  • Web Address (Website)
  • Featured Image (File Upload)

After creating your listing form, you can embed it on a post or page by using the Gravity Forms Gutenberg block. Simply edit your page or post using the block editor, click on the ‘+’ icon to add a new block, and search for “Gravity Forms”.

Now select your form from the dropdown menu – you should see a preview of your form load inside the editor. When you’re done, save your changes by clicking “Publish”.

Here’s what our Gravity Forms directory listing form looks like on the front end:

A form with fields for capturing business information such as Business Name, Business Description, Address and more

After creating your form and embedding it on a page or post, the next step is to set up a View to display business profiles on the front end.

Creating a View to Display Gravity Forms Entries

To create a new View, hover over Views in your WordPress sidebar and click New View. Now give your View name (this is for your reference only and won’t appear on the actual page!) and select your new form as the Data Source. This tells GravityView where to pull data from for displaying on the front end.

An arrow pointing to the New View link underneath Views in the WordPress admin menu

Next, you need to choose a View Layout. GravityView includes a range of preset view layouts allowing you to build diverse applications. The best layout for a business directory is the List layout.

The GravityView List layout

After selecting your View Type, you can start constructing your directory using GravityView’s drag and drop builder.

A View in GravityView is made up of three separate layouts – the Multiple Entries layout, the Single Entry layout, and the Edit Entry layout. To navigate between layouts, click on the different tabs at the top of the page.

The Multiple Entries Layout tab, the Single Entry Layout tab amd the Edit Entry Layout tab

Configuring the Multiple Entries Layout

The Multiple Entries layout is the main directory page where all of your listings will show up one after the other.

A View layout is composed of fields and widgets. Fields refer to the fields in your form, while widgets are helpful navigational tools such as search bars or pagination links. 

You can add fields to the Entries Fields section of your layout whereas widgets can only be added to the widget areas at the top or bottom of the View.

To get started, scroll down to the Entries Fields section where you’ll see the following subsections:

  • Listing Title
  • Subheading
  • Image
  • Other fields
  • Footer left
  • Footer right

For this example, we’ll add the Business Name to the Listing Title, the Business Summary to the Subheading, the Featured Image to the Image block, and the Business Description to the Other Fields section. 

Finally, we’ll add the Web Address and Business Phone fields to the Left Footer area and in the Right Footer area, we’ll add a link to the Single Entry. To add a link to the Single Entry layout, click the Add Fields button and search for the Link to Single Entry field.

The Entries Fields section in the GravityView View editor

Finally, we’ll add a search widget to the top widget area allowing users to search listings by Business Name, City, or keyword. To add a search widget to your View, click on the + Add Widget button and click on the Search Bar option.

An arrow pointing to the GravityView Search Bar widget

To configure the search settings, click on the gear icon next to the widget name. Here you can add search fields and specify custom labels.

The GravityView search settings

After adding a few listings, here’s what our directory looks like on the front end.

Gravity Forms business directory listings displaying on the front end

Although it’s looking pretty slick already, we’re not done yet! We still need to build the Single Entry layout, the Edit Entry layout and configure some View Settings! 

Building the Single Entry Layout

The GravityView Single Entry Layout allows you to view more information about a particular listing. This is the page that users will go to when they click on the “View Details” link at the bottom right of a listing.

To start building out the Single Entry layout, click on the Single Entry Layout tab at the top. 

The GravityView Single Entry Layout tab

Here you can add fields that don’t appear on the Multiple Entries page, such as the Business Address and Email fields. Next, add a link to the Edit Entry layout so that logged-in users will be able to edit their listings from the front end.

To add a link to the Edit Entry layout, click on the + Add Fields button and select Link to Edit Entry.

An arrow pointing to the 'Link to Edit Entry' field in GravityView

Here’s what the single entry page looks like on the front end:

A single business directory listing on the front end

It’s looking rather professional, don’t you think? And we’re almost done! All we need to do now is configure the Edit Entry layout.

Configuring the Edit Entry Layout

The Edit Entry layout allows listing owners to edit their listings from the front end. By configuring the Edit Entry layout you can specify which fields are editable.

If you leave the layout blank then all of the fields will be editable. So if you only want certain fields to be editable by entry owners, it’s best to add them to the Edit Entry configuration.

The GravityView Edit Entry configuration showing the Business Name, Business Summary, Business Description and Address fields

When you’re finished, the final step is to configure the View Settings and enable user edit so that businesses owners can edit their own entries from the front end.

Configuring the View Settings

GravityView includes a range of options and settings that allow you to customize your View layouts. To edit the View Settings, scroll down to the Settings meta box.

To allow users to edit their own listings, click on the Edit Entry tab and check the box that says “Allow User Edit”.

The GravityView Edit Entry settings with an arrow pointing to the 'Allow User Edit' checkbox

If you want to approve entries before they appear publically in the directory, click on the View Settings tab and check the box that says “Show only approved entries”.

The GravityView View Settings with an arrow pointing to the 'Show only approved entries' checkbox

That’s it! You’ve now got a fully functioning Gravity Forms business directory. 

A Gravity Forms business directory showing business listings on the front end

Now let’s have a look at how you can extend your directory to create more sophisticated layouts.

Bonus: Google Maps Integration

The GravityView Maps Premium layout allows you to display Gravity Forms entries on a Google Map. The Maps layout is perfect for building geolocation directories or local business directories.

The Maps layout is only available to All Access customers, so you’ll need an All Access license if you want to build map-based applications.

To get started with the Maps layout, you’ll need to create a Google Maps API key and add it to GravityView. After that, create a new View and select “Map” as the View Type

An arrow pointing to the GravityView Map layout

As long as your form has an Address field, GravityView will geocode the address and display it on a map using the Google Maps API. After building your View and configuring the View Settings, open it on the front end.

A Google Map showing business listings in a directory as markers on the map

Clicking on one of the pins will bring up additional information about the listing.

An information box that appears when clicking on a map marker showing additional information about the business

There are also a number of different options and settings available for customizing the map layout!

Extending Your Gravity Forms Directory

GravityView offers a range of extensions that allow you to extend your directory by adding extra functionality.

Add Social Sharing Buttons

With the Social Sharing & SEO extension, you can add social share buttons to individual directory listings. This allows users to easily share listings on their social networks.

Adding social sharing buttons to your Gravity Forms business directory can help increase engagement and drive organic traffic!

Rank Higher in Search Engines

The Social Sharing & SEO extension also helps you improve your SEO and rank higher in the search results. The plugin integrates with the most powerful WordPress SEO plugin – Yoast SEO.

This allows you to add custom metadata to your Views and single listings as well as social images and more!

Build a Custom Gravity Forms Directory Layout

The GravityView DIY layout allows you to build your own custom directory layout using HTML and CSS. This is perfect for anyone who feels too constrained by GravityView’s preset layout templates.

Are you planning to build a paid business directory? Using GravityView’s Featured Entries extension, you can charge companies to post “featured” listings that show up at the top of the search results.

Gravity Forms business directory showing a featured listing at the top highlighted in yellow

As you can see, “Bill’s Cafe” is a featured listing because it’s highlighted in yellow, and shows up at the top of the directory.

Filter Entries

The GravityView Advanced Filtering extension allows you to filter entries using conditional logic. This gives you full control over what entries are displayed in your directory. Advanced filtering allows you to:

  • Show only the entries created by the logged-in user
  • Display different entries based on a user’s role
  • Restrict entries by date range
  • Filter entries based on the URL query parameters passed to the current page

What Else Can You Do With GravityView?

GravityView is a flexible plugin that allows you to build powerful front-end applications on top of Gravity Forms. That means you’re not limited to directories! In fact, we’ve written a series of tutorials showing you how to build a task management system, an employee directory/database, a job board, and plenty more sophisticated applications!

Start Building Your Gravity Forms Directory Today

GravityView is a powerful add-on for Gravity Forms that allows you to build powerful directories and applications.

In this post, we showed you how to build a Gravity Forms business directory by using GravityView to display form entries on the front end of your website. A business directory is a website that indexes businesses in specific industries and helps users to find the goods and services that they need.

So if you’re looking to build a business directory on WordPress, get GravityView today – the best Gravity Forms directory plugin! 🤩