Styling PDF file exports using CSS

Looking to customize your PDF without writing code? Check out GravityExport PDF export settings for built-in options like page size, colors, fonts, and header images.

GravityExport gives you full control over the look and feel of PDF file exports. Before the PDF is rendered, an HTML table is constructed:

<table border="0" cellpadding="0" cellspacing="0" id="sheet0" class="sheet0">
   <thead>
      <tr class="row0">
         <th class="column0">Form Field 1</th>
         <th class="column1">Form Field 2</th>
         <th class="column2">Form Field 3</th>
      </tr>
   </thead>
   <tbody>
      <tr class="row1">
         <td class="column0">Entry 1 - Field 1 Value</td>
         <td class="column1">Entry 1 - Field 2 Value</td>
         <td class="column2">Entry 1 - Field 3 Value</td>
      </tr>
      <tr class="row2">
         <td class="column0">Entry 2 - Field 1 Value</td>
         <td class="column1">Entry 2 - Field 2 Value</td>
         <td class="column2">Entry 2 - Field 3 Value</td>
      </tr>
      <tr class="row3">
         <td class="column0">Entry 3 - Field 1 Value</td>
         <td class="column1">Entry 3 - Field 2 Value</td>
         <td class="column2">Entry 3 - Field 3 Value</td>
      </tr>
   </tbody>
</table>

Using the barebones stylesheet that's included with GravityExport, the end result will look as follows:

Table with three columns: Form Field 1, 2, 3. Each column lists three entry values

To customize header columns and rows, you need to create your own CSS file with custom styles that target HTML table element selectors/classes. For example, your custom_stylesheet.css may look as follows:

table.sheet0 {
    font-size: 14px;
    font-weight: bolder;
    table-layout: fixed;
    width: 60%;
}

table.sheet0 th, table.sheet0 td {
    text-align: left;
    border: none;
    padding: 5px 0 5px 0;
}

table.sheet0 tr {
    background-color: white;
}

table.sheet0 tr:nth-child(odd) {
    background-color: #F3F3F3;
}

table.sheet0 th {
    font-size: 15px;
    font-weight: bold;
    color: white;
    background-color: #2D4154;
}

For GravityExport to apply these styles, you need to use a custom filter to specify where that file is located:

add_filter( 'gk/gravityexport/pdf/styles', function ( $styles ) {
	$styles[] = '/path/to/upload-folder/custom_stylesheet.css';
        
        return $styles;
} );

Read here how to add this code sample to your website: Where to put code samples.

You can pull the correct path location to your upload folder by looking into the System Status page of Gravity Forms:

Image from Article: Styling PDF file exports

This will apply styles to PDF exports from all forms. If you want to target a single form, suffix the filter with the form's ID: 'gk/gravityexport/pdf/styles_100' .

If you wish to override the base styles completely, change the above code sample to read:

$styles = '/path/to/upload-folder/custom_stylesheet.css';

Once done, your PDF will look as follows:

Table with three columns: Form Field 1, 2, 3; three rows of entry values