Styling PDFs

Introduction

With our new PDF features, we have also included the ability to define at the account or admin levels, custom headers and footers for your generated PDFs by using HTML and CSS. When defined, these will display on every page of the PDF export regardless of where the PDF is generated.

Requirements

These features are available on Premier, Enterprise, and Compliance Cloud plans.

Setup

Note:

Only a single set of style tags is able to be used at this time, though inline styles are also supported.
External style sheets are not supported.
Our Support Team does not support the writing or editing of custom code, such as HTML and CSS.

Advanced Branding for a Single User

If you would like to add branding to all of the forms on one user account, you'll find the Branding feature in the General Settings page. Click the Define a header and footer for your forms link to open the Branding Editor:

Next, uncheck the "inherit" option for PDF Header and/or PDF Footer. Insert your custom HTML and CSS and click "Save". Here is an example setup:

Export a PDF to view the branding.

Advanced Branding for your Instance (Administrator Settings)

If you are an admin who would like to set the branding for all PDFs generated by all users in your Enterprise or Compliance Cloud instance, you can do so from the Admin Dashboard. In the Dashboard, browse to Forms > Form Header & Footer or use the following URL:

https://YOUR-INSTANCE.net/admin/brandings/edit

Under Default PDF Header or Default PDF Footer, insert your custom HTML and CSS and click "Save".

Note: All users will need to set their own branding to "Inherit" in order to inherit this default branding.

Custom Code Examples

Note: The examples listed below are common examples. You may need to edit these examples to fit your forms' needs. Our support team does not provide custom code and cannot help edit, write, or design custom code for your forms.

The following code can be added to your Account Branding as described in the "Setup" section above.

Hide the PDF Metadata

<style>
  .metadata-div {
    display: none;
  } 
</style>

Hide the File List

<style>
 .file-list-div {
    display: none;
  }
</style>

Hide Both the Metadata and the File List

<style>
  .metadata-div {
    display: none;
  } 
 .file-list-div {
    display: none;
  }
</style>

In this Article

Related Articles