Hello everyone,
I am currently facing an issue while trying to incorporate a custom HTML code for invoice notifications within Zoho CRM. The HTML code is meant to enhance the look and feel of the email, providing a more professional and interactive experience for the recipients. However, when I try to add this code into the Email Templates section, I run into various issues such as formatting errors and elements not displaying as expected.
Here is a snippet of the HTML code I'm trying to use (it's not perfect since I've not been able to preview it:
- <!DOCTYPE html>
<html>
<head>
<title>Invoice Notification</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
}
.container {
max-width: 600px;
margin: auto;
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
padding: 20px;
}
.content {
font-family: Calibri, sans-serif;
}
.button {
background-color: #1b2934;
border: none;
color: white;
font-weight: bold;
padding: 12px 24px;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 20px auto;
cursor: pointer;
border-radius: 12px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<div>Dear %FirstName%,</div>
<div><br></div>
<div>*If you are not responsible for finances within your company, please forward this onto the relevant person/department.</div>
<div><br></div>
<div>I hope this message finds you well. We would like to inform you that a new invoice has been generated for the services provided for %ContactCompanyName%.</div>
<div><br></div>
<div>Invoice Details:</div>
<div><br></div>
<div>
<ul>
<li>Invoice Number: %InvoiceNumber%</li>
<li>Invoice Date: %InvoiceDate%</li>
<li>Due Date: %DueDate%</li>
<li>Total Amount: %Balance%</li>
</ul>
</div>
<div><br></div>
<div>Please <a href="%InvoiceURL%">Access Your Invoice</a> to review the details.</div>
<div><br></div>
<div>For your convenience, we offer two payment options:</div>
<div><br></div>
<div>
<ol>
<li>Pay online using a credit/debit card through Stripe: <a href="%PaymentLink%" class="button">Make Payment Now</a></li>
<li>Bank transfer (please find the necessary details on the invoice)</li>
</ol>
</div>
<div><br></div>
<div>Should you have any questions or need further assistance, please do not hesitate to contact me at addison@kyged.com. We appreciate your business and look forward to continuing our collaboration on your projects.</div>
<div><br></div>
<div>Kind regards,</div>
<div><br></div>
<div>Addison Booth</div>
<div>%CompanyName%</div>
<div><br></div>
<div>P.S. Please note that this is an automated email. If you need assistance, kindly reach out to the email address mentioned above.</div>
</div>
</div>
</body>
</html>
When I preview the email or send it as a test, the email design doesn't match what I intended in the HTML code.
I've double-checked the HTML code and also tried simplifying it to isolate the issue, but the problem persists.
Has anyone else encountered this problem of HTML code not rendering as expected? Any advice or workaround would be extremely helpful.
Thank you in advance for any assistance you can provide.
Best regards,
Addison