Written by Gravitykit’s editorial team…

A corporate directory is a powerful way to connect customers with local services, professionals or companies specific to industry. Whether you are building a community resource or a niche, Gravitykit and GravityView registration site facilitate collection, manage and display directories, all without writing a single line of code!

In this didacticial step by step, you will learn how to create a directory submission form, to display the announcements in a consultable interface, to integrate an interactive card and even to allow companies to modify their lists from the front.

Let’s dive!

See an overview

Here is a quick overview of the commercial repertoire that we are going to build in this tutorial. As you can see, there is a search bar, an interactive card and a lists table below.

Click on a business name allows you to see more information on this specific company, including its location, description and other important information from the company!

Follow to see how we built it.

1. Create the list of directories

The first step in creating a repertoire is to create a shape to capture the lists of directories. Since we build a business directory, our form will allow companies to submit their profiles, including essential details such as their name, industry, location, contact details, etc.

Using Gravity Forms’ intuitive drag and drop-down form generator, you can easily create a submission form adapted to the needs of your directory.

After creating our form, we will integrate it on a page or message using the gravity forms block. Here’s what it looks like:

Once the form is configured, do not hesitate to personalize the confirmation message or redirect users to a thank you page after submission. You can even integrate the notifications by e-mail to confirm the receipt of their ad and hold the informed users of the approval process!

With our ready -made business submission form, the next step is to display these announcements in a dynamic and friendly directory. This is where GravityView enters!

2. Create a view for your form data with GravityView

GravityView is an additional Gravitykit module for severity forms that allows you to create powerful web applications. It is perfect for directories, job sites, task management systems and all other dynamic applications you want to create.

Using GravityView, you can create Views– Very configurable interfaces to display the submission data for severity forms at the front of your website.

To create a new view, we will hover Gravity and click New view. Then we are going:

1. Give our name.
2. Connect it to our Commercial lists Form by selecting it as data source.
3. Select a type of view: for this example, we will select Painting.

Now we can start building our repertoire by adding fields and widgets!

Configure the layout of multiple entries

The arrangement of multiple entries is the page where each of our directories will be displayed one after the other.

Let’s start by adding widgets to Upper widgets area. Here we are going to add a search bar and a card widget to several entries.

The search bar will allow users to search for companies according to various criteria, while the card allows us to display the locations of companies as markers on a Google card! Note that the card will only work if your form includes a Address field.

The search bar widget is fully customizable, which allows us to add or delete search entries. He also supports a Geolocation radius Field, allowing users to find companies near their current location.

After adding our widgets, we can scroll downwards Application fields Section where we can choose the fields to display for each list of directories. Since we use the arrangement of the GravityView table, each field will appear as a column in our table.

Add the name of the company, the industry, the city, the commercial emails and the main areas of the professional phone.

Finally, we are going to make the company’s name field a link to the single entry page so that users can click on it to display additional information! We can do this by opening the field parameters and checking the Link to a single entry box.

Here is what the arrangement of multiple entries looks like on the front-end:

Now let’s see our attention to the unique entry arrangement.

Configure the single input arrangement

To configure the unique input page, we will click on the Single entry arrangement Tab at the top of the view editor. Now let’s change the type of view to a layout builder. This will allow us to create pages of directories with lines and columns, such as a pages manufacturer!

By clicking on the Line Button, we can add new lines at our disposal with different column structures.

This allows us to create attractive registration pages for companies that submit to our repertoire.

Here’s what the front registration page looks like:

We are almost there! Then we must activate the entry edition.

Configure the layout of the publishing entrance

GravityView allows users to modify the entries they create – directly from the front! Administrators can specify which fields can be modified by adding them to GravityView Edit layout. For this example, we will add the name of the company, the description of the company and the areas of industry.

Configure viewing settings

Finally, we must configure the views. First of all, we will click on the Edit Tab and check the box entitled Authorize user editing. This will allow the frontal editing function of GravityView.

Then we will click on the Cards tab and select the Address field we want to show on the map. We can also configure the remaining card settings here.

That’s it!

Bonus: add more features

With the additional modules and Gravitykit extensions, you can add even more features to your directory:

• Transform your long submission forms into several pages forms for improved user experience.
• Use the GravityView advanced filter to display only the inputs created by the currently logged in user.
• Use GravityView’s DataTable arrangement for in -depth sorting, filtering and export options.
• Use the GravityView Ratings & Reviews extension to allow users to note and comment on directory announcements.
• Much more!

Start building your repertoire powered by severity forms today!

In this article, we have shown you how to build a dynamic commercial directory using Gravity Forms and GravityView. Let the visitors go through the lists, search in keywords or location and display the detailed commercial profiles, all from an intuitive and friendly interface.

With GravityView Pro, you can go even further your directory by adding advanced search filters, personalized arrangements or even monetization options such as paid lists. The possibilities are endless!