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…
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.
I’ve kept the form simple by limiting it to four required fields, and a handful of optional fields.
The required fields are:
- Name (Name field)
- Job Title (Single Line Text field)
- Bio (Paragraph field)
- Profile Picture (File Upload or Image Hopper field)
The optional fields are:
- Email (Email field)
- Mobile (Phone field)
- Date Joined (Date field)
- Twitter Handle (Single Line Text field)
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.
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:
<style>
.gv-list-multiple-container.gv-container{
display:flex;
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;
}
</style>
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.
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
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
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
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
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.
Display
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.
Advanced
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 ⚙️.
Display
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.
Label
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.
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.
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.
