Skip to main content
Version: 3

Creating Your First Custom PDF Template: An Introduction

Creating a custom template allows you to control exactly how you want the generated PDF document to look. Our software uses HTML and CSS to generate the PDF documents, so you can use a language you already know to automate the document creation process with Gravity Forms. You also have full access to all PHP and WordPress functions and APIs to create advanced PDFs, and pull data from multiple sources.

Getting Started

(S)FTP into your web server and navigate to the PDF_EXTENDED_TEMPLATES folder, which is in your uploads directory. Inside you'll find a directory labelled with your site name. If running a multisite you'll see multiple directories. Select the appropriate folder.
The upload directory on a standard WordPress website is located in the /wp-content/ folder.
Gravity PDF 3.6.0 moved the PDF_EXTENDED_TEMPLATES folder from your active theme to your uploads directory.

An example of the plugins folder structure. An example of the plugins folder structure.

Inside this directory structure you will find the PDF templates that we feed to the plugin. There are a number of example templates to show off the features of the plugin and help give you a starting point for building your PDF templates.

The first step you want to take is copy and rename one of the example template files. Do NOT copy any of the default template files, as they are missing vital snippets for creating custom template files.

Ensure you copy one of the example template files and NOT the default template files.

We've copied the example-template.php file and renamed it my-custom-template.php We've copied the example-template.php file and renamed it my-custom-template.php

Open your newly copied template file in your favourite editor and review the code. It's a standard looking HTML document with bits of PHP thrown in the mix.

The PDF template structure The PDF template structure

Like HTML, the <body> section holds our structure. You should ensure any modifications to the <body> are made in between the foreach loop.

The last step in preparing your new PDF template is to remove the old template's <body> HTML.

Remove the example template's HTML so you can start fresh with your own custom HTML. Remove the example template's HTML so you can start fresh with your own custom HTML.

Including Gravity Form Fields in Your Template

There are two methods you can use to access Gravity Forms data in your custom PDF template:

  1. Gravity Forms merge tags
  2. The $form_data array

Which method you use depends on your technical knowledge. If you are confident using PHP we recommend the $form_data array as you’ll be able to use and manipulate the entry data. While merge tags are easier to use they are rendered right before the PDF is processed which means you cannot manipulate or change the data. Anyone unfamiliar with PHP should stick with using merge tags.

Configure the Plugin

Open your configuration.php file and create a configuration node using the template config option.

/* the very basic configuration telling the plugin to use your custom PDF template on form #3 */
$gf_pdf_config[] = array(
	'form_id'        => 3,
	'template'       => 'my-custom-template.php' /* you need to set this to your custom template name */
);

Once saved and uploaded back to your server you will be able to navigate to your form's entry page and view your custom PDF via the View PDF link.

The View PDF button on the form's entry list page. The View PDF button on the form's entry list page.

You can also view the PDF when viewing details of the entry. The PDF View and Download buttons are located in the right hand sidebar.

The entry details page also has PDF View and Download buttons for easy access. The entry details page also has PDF View and Download buttons for easy access.

Using Custom Fonts

You can include TTF font files in your PDF documents - provided the font author hasn't put restrictions on the font file. Users who need CJK-supported fonts in there PDFs will need to download and install extra fonts.

Supported HTML and CSS

mPDF, the software we use to generate the PDFs, is extremely powerful but does have limitations in its HTML and CSS support. Most notably is the lack of cascading styles, elements fixed to either inline or block, and the limited float and fixed positioning support.

Before beginning on your custom PDF template we recommend you review the supported HTML and CSS tags and attributes.

Debugging Templates

In certain circumstances it is helpful to be able to view the HTML source that is being generated by your PDF template. To do this is as simple as adding &html=1 to your PDF URL.

First, view your PDF from the entries list page. Then modify the URL with the &html=1 code. For example, the full PDF URL might look like this:

https://gravitypdf.com/?gf_pdf=1&amp;fid=3&amp;lid=20&amp;template=my-custom-template.php&html=1

You can then view the HTML source or use a developers tool like Firebug to help you review the PDF template.

Due to the limited support for some HTML and CSS features in mPDF the output of the HTML view may differ from the produced PDF.

Last updated on