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="https://stagingserver.online/codemonkeysdev/wp-content/uploads/2018/02/logo.jpg" 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
RESULTS:
Front-end - no image
Back-end - no customizations, but can easily be updated: How to customize forms CSS
Generated PDF - also attached (password = password)