How to Build a Business Directory With Gravity Forms

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!

💡 Check out a live demo of the finished business directory and get your own free trial site preloaded with all GravityKit add-ons!

Taking a Sneak Peek at the Finished Directory

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

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.

Step #2 – Click Upload Plugin.

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

Step #4 – Click Install Now.

Step #5 – Click Activate Plugin.

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:

Save time by downloading the free business listing form template now!

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.

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.

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.

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.

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.

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.

💡 Pro tip: Consider adding an A-Z Filter widget for additional sorting/filtering options.

After adding a few listings, here’s what our directory looks like 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. 

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.

Here’s what the single entry page looks like 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 manually add them to the Edit Entry configuration.

💡 Pro tip: If you want to allow website users to contact directory members directly, you can add a contact form to the Single Entry layout and prepopulate it with information from the entry.

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”.

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”.

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

💡 Pro tip: In this tutorial, we showed you how to build a single column directory. If you’re looking to build a multi-column directory where listings display in a grid, read How to Build a Multi-Column Member Directory Using GravityView.

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. 

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.

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

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

Extending Your Gravity Forms Directory

There are many ways to extend your business directory. For example, you could make it easier for directory members to edit their information by adding an “Edit Profile” link to your website sidebar or footer.

GravityView also offers a range of extensions that allow you to customize your directory even further 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.

Charge Companies for “Featured” Listings

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.

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 Using Conditional Logic

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

Add “Claim Entry” Functionality

Did you know that using Gravity Flow, you can create an approval workflow, allowing new users to take ownership of existing business listings?

This is helpful if you’re running a business directory and you want users to have control over their own profiles, including the ability to update information from the front end. For a full tutorial on how to implement this, read our guide on adding “claim entry” functionality to Gravity Forms directories.

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, a real estate listing site 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! 🤩