Email Templates - HTML question

Hello,

I am making a new quote template. I'm using the version of the template editor that lets you edit HTML, but it doesn't look like this one has "Add header" or "Add footer" options, so I need to do these in the HTML code.

What I'm trying to do is as follows:

1. If it's possible to insert a variable recognized by Zoho that inserts "current page #" and "total # of pages". See the highlighted section in the HTML code. I put the {{'s as placeholders for now until I know if this is possible

2. Correct the HMTL code so that it renders correctly as a footer, see the bottom image. Right now it is inserting that at the bottom of the PDF and actually it is overlapping the bottom image.

Thanks in advance to anyone who can help!

The HTML code used in the Template Editor:

<div><meta charset="UTF-8">

<title>Document with Header and Footer</title>

<style>

body {

margin: 0;

padding: 0;

}

.content {

margin: 0 2cm; /* Adjust the margin as needed */

}

.footer {

position: fixed;

bottom: 1cm;

width: 100%;

text-align: left;

font-family: Arial, sans-serif;

}

.footer-line {

border-top: 1px solid #000;

margin: 0 2cm;

}

.footer-text {

margin: 0 2cm;

font-size: 12px;

}

.footer-center {

text-align: center;

font-size: 14px;

margin: 0 2cm;

}

</style>

<div class="content"><img imgfilesize="95171" src="https://crm.zoho.com/crm/viewInLineImage?fileContent=bba7dd672a8dd357c13f01f80aef02129b908ce731d39b22420ea457ccc38a00cebd2a1371803fbcfc0f7e9fb3c32ea757837d62eb0e3cbe751585470d5ef7bc1b73f0201899f6e1db6ba3d926b2961d583cb93d37aacdf0818fb9aacbf0a7f5" align="" width="100%"></div><div class="content"><br>

<div>

</div>

<font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2">DATE:        <span style="white-space:pre"> </span>{Insert Date Field}</font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2"><br></font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2">TO:                 ${Quotes.Contact Name}</font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2"><br></font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2">FROM:            ${Quotes.Quote Owner}</font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2"><br></font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2">EMAIL:            ${Quotes.Contact Email}</font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2"><br></font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2">SUBJECT:        ${Quotes.Subject}</font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2"><br></font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2">${Quotes.Proposal Body}</font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2"><br></font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2"><br></font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2"><b>THE PRICE TO COMPLETE THE WORK AS DESCRIBED ABOVE IS $${Quotes.Proposal Price}, TAX INCLUDED.</b></font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2"><b><br></b></font></div><div class="content"><font face="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif" size="2">${Quotes.Terms and Conditions}</font></div><div class="content"><br></div><div class="content"><br></div><div class="content"><img imgfilesize="8583" src="https://crm.zoho.com/crm/viewInLineImage?fileContent=082d5e87140799bd4212782d793c5e527b9209e6c26a778a37f11e0a46f1999ae83112d6df663cd9109716a059bb9cc41f50b1e858debf4d2b5b10e9c087da38918f417fa8d90a788e3ed8e287135923e6dfedcfb2227b0dc6dbd3fbf989a2d2" align="" width="100%"><br></div>

<div class="footer">

<div class="footer-line"></div>

<div class="footer-text">

Page {{PageNumber}} of {{TotalPages}}</div>

<div class="footer-center"><font size="4"><i>

Solutions for Water Systems

</i></font></div>

</div></div>

Here is our template in the editor mode, note the header and signature block are actually pasted images so I can get better looking results.

Here is how it currently renders in PDF, note the footer didn't work correctly on the 1st page and on the 2nd page it is not at the bottom but overlapping the image:

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Topic Participants
Derek Brown
Ishwarya SG

Sticky Posts
Focus Group Webinar - Streamline Record Creation with Wizards
Hi there, With all the time your users spend on record creation, do you feel like they have the most seamless experience while doing it? For different types of records or those with a LOT of fields, do your users spend time navigating to enter data repeatedly?
Notes and Attachments visibility can now be restricted based on profiles
Dear All, We hope you're well! We are here with a quick update about Notes and Attachments profile permissions. In the past, a record's Notes and Attachments were visible by default to all users with record access. However, as notes and attachments can
Identify and prioritize profitable deals: Zoho CRM Forecasts help users focus on revenue-driving opportunities
Post moderated on: 7th November: Release update: This feature is now available for users in all DCs. Dear Customers, We hope you're well! At any given time, a sales rep handles multiple deals, each progressing at its own pace. But not all deals will succeed—some
Gain control over record sharing with portal users through our new enhancement: criteria-based data exposure
Dear Customers, We hope you're well! Portals is a self-service avenue through which your clients can access and manage their direct and related data in Zoho CRM. This empowers them to be more independent and enables them to experience a sense of transparency
Context and convenience just got better with Zia's email intelligence
Dear Customers, We hope you're well! We are in 2024, and email as a tool is only getting more powerful each day. While it enables seamless daily correspondences, we are here with a set of abilities that will enhance your user experience and save several