How To: Combine GravityView and Gravity PDF to Create Useful Directories / Listings Using Gravity Forms Entries

Featured image for the "Combine GravityView and Gravity PDF to Create Useful Directories / Listings with Gravity Forms Entries" blog post
Learn how to use GravityView to easily create visually appealing business directories / listings. Then take it to the next level with the PDF for GravityView extension: a powerful document generator tool for downloading and sharing dynamic PDFs.

Match Made in “Form” Heaven

In today’s digital landscape, online forms have become indispensable for businesses and organizations of all sizes. Once you’ve collected the data, the real challenge is converting it to useful formats. This is where Gravity Forms’ ecosystem really shines. As one of the oldest form builder plugins in the WordPress space, there’s an extensive array of first- and third-party add-ons to tap into when you want to go beyond simple forms.

One fantastic add-on is GravityView from the GravityKit team. GravityView transforms form submissions into visually-captivating and interactive formats. This allows everyday people to build powerful web applications with little-to-no code. A few common use-cases for GravityView includes business directories, listings, or classifieds. And the story doesn’t end there! With the release of With the release of PDF for GravityView by yours truly (the Gravity PDF team), you can transform GravityView into an advanced PDF builder tool

By combining the capabilities of GravityView, the flexibility of Gravity PDF, and the data (and reliability) of Gravity Forms, a new horizon of possibilities opens up. Come on! Let’s take PDF for GravityView for a spin and see just what it’s capable of.

Turning your View Up to Eleven

Imagine you’re a small business operating a website that connects professionals from various industries. To effectively showcase your members you need a visually stunning directory that highlights key information about each member, is searchable, sortable, and facilitates information sharing. How? Gravity Forms, GravityView, and Gravity PDF make for an excellent combo.

As you’ll see shortly, it’s a piece of cake for Gravity Forms to collect the information from each member in the directory. Then GravityView to take that data and create a visually appealing directory in minutes. While Gravity PDF (and the PDF for GravityView extension) adds that final flourish with PDF sharing / downloading. 

In this comprehensive guide, I’ll take you step-by-step through each process of this build. By the end, you’ll learn how to leverage these amazing products for your own use-case. Let’s get started!

0. Install and Activate PDF for GravityView

If you’d like to follow along, make sure you have Gravity Forms and GravityView plugins enabled on your WordPress website. You’ll also need to install the free version of Gravity PDF, and purchase PDF for GravityView from our online store. Got all four plugins activated? Great! Let’s build a form…

Want to follow along?
Grab your copy of the PDF for GravityView Add-on.

1. Create a Form

For your convenience, here’s the form export file you can download (right-click and save as) and import onto your website. Alternatively, feel free to follow along and build your own form.

Screenshot of the Gravity Forms Form editor while building a Member Profile form

I’ve kept the form simple by limiting it to four required fields, and a handful of optional fields. 

The required fields are:

The optional fields are:

Feel free to add or remove fields to suit your needs.

To allow users to upload images to their profiles, you can use a simple File Upload field. However, you have limited control over the size and quality of the image. A better approach is to use our sister-product, Image Hopper, which includes a robust image editor and advanced validation tools.

Edit and enhance pictures without leaving the form!
Start uploading better pictures with Image Hopper today!

Once you have finished crafting your form, select the Save Form button (top-right corner).

2. Create a List View in GravityView

Now the form is built, let’s create the directory to display the form submissions on the front end of the website.

If you are still in the Form Editor, it’s as simple as picking the Create a View menu item in Gravity Forms’ inline toolbar, and then giving your new View a name. Otherwise, hover over GravityKit in the WordPress admin menu and then select New View. Enter a name for your View (mine is “Member Directory”), and under Data Source, select the form you built in Step 1. In my case, it’s the Member Profile form.

GravityView offers a wide variety of View types for different use cases. I’m going to utilize the List View for the directory, as it has a nice layout for displaying contact details. Select List View to continue.

Once you’ve selected a layout, the View Editor will load. At the top of the editor, you will find three tabs that correspond to the three different layouts that make up a View. Let’s take a look at what each of these layouts is for.

Multiple Entries Layout

This layout is the main page where your paginated form entries will be displayed. In our case, this will be the page that displays our main directory.

You can customize your layout by adding widgets and fields where needed. For an in-depth guide on how to do this, take a look at GravityView’s documentation.

The List View displays entries in a single column, one after the other. But we want to create a multi-column structure instead. Thankfully, GravityView makes this easy with a simple tweak. All you need to do is add a Custom Content field to the Top Widgets section, selecting the cog on the new field to bring up the field settings, then add the following code to the text editor:

    flex-wrap: wrap;

.gv-list-multiple-container.gv-container .gv-list-view {
	margin-right: 10px;
      width: 250px;

.gv-list-view { 
    border:none !important;

.gv-list-view-title {
    border:none !important; 

I labeled the Custom Content field as “Styles”, but feel free to use any label you prefer.

Continue adding fields under the Entries Fields section as needed. I’ve gone ahead and added the Image Hopper field (or File Upload field), Job Title, and Name field. We’ll also need to provide a link to the Single Entry View. You can either add the Link to Single Entry field to the View, or edit the settings of the Name and enable the Link to Single Entry Display option.

Once you’ve got all the fields added to the Multiple Entries Layout, click the  Publish button (top-right corner).

Pro Tip: You can use merge tags almost anywhere in GravityView. In the video above, I used the name merge tags for the text of the Link to Single Entry field.

If you’re following along, you probably don’t have any entries in your new form yet. Before we take a look at what our member directory looks like, submit a half-dozen test entries. Approve each entry so they will be displayed in your View.

Image of a Member Directory List built with GravityView

Once you’ve approved entries, you can see what it looks like by navigating to the Views List, hovering over the Member Directory row, and selecting View. Voila! It’s impressive, right?

Single Entry Layout

This layout allows you to show more detailed information about a particular entry. It’s also the basis for the PDF document that we will set up in Step 3.

To configure the Single Entry layout, return to the View Editor and select the Single Entry Layout tab.

The process of building this page is similar to the Multiple Entries layout – there just aren’t any widgets. Simply add any fields that you want displayed. I’ve added the following fields:

  • Name
  • Job Title
  • Profile Picture
  • Bio
  • Twitter Handle
  • Date Joined

Once you’ve finished setting up the Single Entry layout, click the Update button. To review your handywork, go back to the front-end view and pick one of your Link to Single Entry hyperlinks.

3. Build and Personalize the PDFs

Now that we have set up our View, it’s time to create and customize the PDF! ✨

NOTICE: PDFs can only be generated for the Single Entry Layout. Support for the Multiple Entries Layout may come at a later date, but isn’t currently supported. Interested in this functionality? Reach out and let us know.

To configure PDF for GravityView, edit the View you’re working on and scroll down to the Settings metabox. You’ll see a new section called Single Entry PDF, which has a heap of settings for the PDF. In the next section of the guide, I’ll explain what each setting does.

Pro Tip: You can use merge tags in the PDF settings where ever you see the merge tags icon { · · }.

Filename and Paper Settings

Screenshot of the Filename and Paper Settings of the PDF for GravityView plugin

If you’ve used Gravity PDF before, these settings should be familiar. You can specify a filename for the PDF, as well as the paper size and orientation. Page Margin is a new setting we’ve introduced, which allows you to adjust the page margins. I changed my paper orientation to Landscape, but feel free to play with ‘em.

Font Settings

Screenshot of the Font Settings of the PDF for GravityView plugin

You can select a font to use in the PDF, and even add your own custom fonts. Additionally, you can adjust the font size and color. I installed and configured Open Sans from Google’s Font Directory and bumped up the font size.

NOTICE: For our European friends, it’s worth noting that custom fonts are not served from Google’s servers. You’d download the font .zip package, locate the .ttf files, and upload to your own web server. In fact, the PDFs themselves are generated directly on your server, and there isn’t a third party involved in the process. Refer to our GDPR documentation for more info.

Header and Footer

Screenshot of the Header and Footer Settings of the PDF for GravityView plugin

The Header and Footer settings allow you to brand and personalize PDFs. Use the Media Library to add your own logo. Just click on the Add Media button and then upload an image of your logo. You can easily adjust the size by dragging the corner of the image to your desired dimensions. This will automatically be reflected in the PDF output, making it easy to tweak after reviewing the generated PDF.

Additionally, you may include any additional information you wish, such as contact information or page numbers. I’ve added a logo and footer in the PDF, but feel free to add your own in the way that best suits your needs.

Background Color and Image

Screenshot of the Background Color and Image Settings of the PDF for GravityView plugin

You can further personalize your PDFs by changing the background color, or adding a background image to all PDF pages. To change the color, click on the Select Color button and use the color picker. If you’d like to add an image, select the Upload button to open the Media Library.

In my case, I’ve uploaded a washed-out background image of the logo, which will  act similar to a watermark in the final PDF output.

Other Settings

Here, you can choose to toggle the display of the title of the Single Entry Layout in the PDF document. You can adjust the title displayed in both the View and PDF from the Single Entry section of the same metabox you are currently working from.

You can also add CSS to further customize the look and feel of your PDFs. Refer to our documentation for useful CSS snippets to help you tweak the appearance of your PDFs. Common adjustments include adding borders to the table layout PDF, increasing or decreasing padding, and transforming the labels.

I’ve only included the CSS in the screenshot for explanatory purposes and will be leaving this setting empty for this How To. Save your View once you’ve finished tinkering with the PDF settings.

NOTICE: What’s the third tab in the View Editor for? The Edit Entry layout enables users to keep their information up to date. This article is already quite long already, so I’m not going to cover it here. But it’s a useful feature for a directory and you can learn more about it in the GravityView documentation.

4. Add Share and Download PDF Features to the View

Now I need to ensure users can download and share the PDFs. This can be done similarly to how you would add any other field to your View.

Select the Add Field button and search “PDF” to locate the two available fields registered by the PDF for GravityView plugin.

Field #1: Link to Single Entry PDF

This field outputs a view or download link to the PDF. It can be added to both the Multiple Entries and Single Entry layout.

After adding the field to your view, click on the cog icon to open the settings. This will give you full control over the appearance and functionality of the PDF link. 


You can choose whether to open the PDF in a new window, specify the link text, and decide whether to force a download or open the document in the browser. I changed the text to “Download PDF”.

Label and Visibility

This feature allows you to customize the label of the field in the View, as well as control the visibility of the PDF link for certain users. In the video, you will see that I disabled the label. This was done for aesthetics.


Here, you can add custom CSS classes to apply styles from your theme. Additionally, you can edit the default expiration period for the links.

Field #2: Share Single Entry PDF

This field allows users to enter an email address into a form, and the corresponding PDF will be sent as an attachment to the email entered. It’s exclusive to the Single Entry Layout, so you won’t find it on the Multiple Entry tab. Also be aware that this field should only be included in your View once, and subsequent fields of this type will be ignored.

Let’s take a look at the settings for this field. Add the field to your View and select the cog ⚙️.


Define a confirmation message to display to users after they submit the form. You can also customize the notification email, much like you would in Gravity Forms.


Similar to the Link to Single Entry (link to section of guide) field, you can customize the labels to translate or provide appropriate instructions for users. You have the option to define the label for the email field and submit button. I changed my submit button to “Share Profile.”

Visibility and Advanced

You can control the visibility for specific users, and add CSS classes to style the contents further.

Once you’ve added both PDF fields to your View, don’t forget to save.

Like these How To Guides? Subscribe to our newsletter to get notified when our next one is published.

5. Wrapping Up

We have finished setting everything up, and it is time to see our Member Directory in action!

To view the PDF, go to the View’s main page (the Multiple Entries layout) on the front-end of your website. Click on an entry to view it individually (this will load the Single Entry Layout). From there, use the PDF download link and appreciate the amazing document you’ve created. You can also try the PDF sharing feature: simply enter your email address, submit, and check your inbox for the PDF.

Image of a meme with the text "PDF all the views!"

Congratulations! You have just learned how to build a directory using Gravity Forms and GravityView, and bolt-on powerful PDF capabilities. Woohoo 🥳With this knowledge, you can now PDF all the Views! Go forth and make your user experience the best it can be.

If you found this How To Guide helpful, spread the word by sharing it on your favorite social media platforms: Facebook (link to share), Twitter (link to share), or any other social media you use.

Start PDFing your Views in no time!
Grab your copy of PDF for GravityView today!