Because of mPDF integration complexities, the only way to have a header image on a generated form is to add it to the form, hide it on the front end and display on the back end.

Caldera was used for this example.  A similar procedure will work in Gravity.

1.  Add HTML image to form with a <div class=""> that you can hide on the front end:

<div class="pdf-header-image"><img src="" alt="Logo" height="162" width="360"></div>

2. Set class to display: none; so that it will not display on the front end.

.pdf-header-image {

    display: none;


3.  Update Forms CSS to show pdf-header-image (this example also deletes the default header information that will display above the image)

.pdf-body .pdf-header-image {

    display: block;

    text-align: center;  


.pdf-heading {

         display: none; }

*  More detail about CSS customizations can be found here: How to customize forms CSS

** More information about the PDF Header can be found here: Modifying Generated PDF Heading with Custom CSS


Front-end - no image

Back-end  - no customizations, but can easily be updated: How to customize forms CSS

Generated PDF - also attached  (password = password)