This guide explains how to add a logo as a PDF header and footer.
- Convert The Logo To A Base64 Image:
- Click this helper form link to convert a Logo/Image to a Base64 image - https://survey.formyoula.com/online_v5/655736e39d9fc80014fea990
- Click “Choose File” and upload the logo from your device. It will convert it into a Base64 image.
- Copy the Base64 image string. We will use this with the footer HTML.
- Note: You can manage the image size using the “Select Size” drop-down.
- Configuring The “PDF Editor”:
- Access the “PDF Editor” of your form by clicking the ”PDF Editor” under “Actions” on the dashboard.
- Click on "PDF Settings".
- Paste the HTML code into the “Footer Template HTML”.
- Use the provided code for "Footer Template HTML".
<style>
#footer,
#header {
padding: 0 !important;
}
.footer-container {
height: 50px;
width: 100%;
text-align: right;
background-color: #e6f3ff;
padding: 5px 0;
-webkit-print-color-adjust: exact;
}
.footer-image {
height: 45px;
padding-right: 20px;
}
</style>
<div class='footer-container'>
<img
class="footer-image img-responsive"
src='data:image/png;base64,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'/>
</div>
- Note: Here, we are using the Base64 image string we copied from the helper form. You can replace the string to display your logo.
- Set the Top and Bottom margins for the page.
- Test The Form:
- You will get the Logo as a PDF footer.
Note: Similarly, we can add the Header to the “Header Template HTML”.
For any questions, please contact us - [email protected] or the Formyoula in-app chat. 🙂