Monthly Energy Bill email template
A monthly energy bill email: amount due and date up top, a usage bar chart, the bill lines and total, a pay button and an energy saving tip with a bulb picture.
Light shows the email as designed. Dark and Gmail show how email apps can change its colors.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Monthly Energy Bill</title>
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
<style>
:root{color-scheme:light dark;supported-color-schemes:light dark;}
body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
table,td{mso-table-lspace:0pt;mso-table-rspace:0pt;border-collapse:collapse;}
img{border:0;outline:none;text-decoration:none;-ms-interpolation-mode:bicubic;}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font-size:inherit!important;font-family:inherit!important;font-weight:inherit!important;line-height:inherit!important;}
u + .ete-body a{color:inherit;text-decoration:none;}
@media only screen and (max-width:620px){
.ete-container{width:100%!important;max-width:100%!important;}
.ete-outer{padding:0!important;}
.ete-content{border-radius:0!important;}
.ete-px{padding-left:20px!important;padding-right:20px!important;}
.ete-stack{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box;padding-left:0!important;padding-right:0!important;}
.ete-stack-gap{padding-bottom:20px!important;}
.ete-fluid{width:100%!important;max-width:100%!important;height:auto!important;}
.ete-fluid-cap{width:100%!important;max-width:280px!important;height:auto!important;display:block!important;margin-left:auto!important;margin-right:auto!important;}
.ete-stack-center,.ete-stack-center p{text-align:center!important;}
.ete-h1{font-size:28px!important;line-height:34px!important;}
.ete-h2{font-size:22px!important;line-height:28px!important;}
.ete-code{font-size:24px!important;letter-spacing:2px!important;}
.ete-btn-full{display:block!important;width:100%!important;box-sizing:border-box;}
.ete-cell{padding-left:0!important;padding-right:0!important;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#0d1009!important;}
.ete-content{background-color:#161b11!important;}
.ete-text{color:#d8e2cc!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#9eab8f!important;}
.ete-link{color:#bef264!important;}
.ete-border{border-color:#2b3424!important;}
.ete-panel{background-color:#1f2619!important;border-color:#2b3424!important;}
.ete-btn{background-color:#84cc16!important;border-color:#84cc16!important;}
.ete-btn-text{color:#142004!important;}
.ete-btn-outline{border-color:#84cc16!important;}
.ete-btn-outline-text{color:#84cc16!important;}
.ete-logo-light{display:none!important;}
.ete-logo-dark{display:block!important;max-height:none!important;overflow:visible!important;}
}
[data-ogsc] .ete-text{color:#d8e2cc!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#9eab8f!important;}
[data-ogsc] .ete-link{color:#bef264!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0d1009!important;}
[data-ogsb] .ete-content{background-color:#161b11!important;}
[data-ogsb] .ete-panel{background-color:#1f2619!important;border-color:#2b3424!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f2f6e9;">
<!-- Made with emailtemplateexamples.com -->
<div class="ete-preheader" style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Your October energy bill is $84.60, due 18 November. See your usage chart. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f2f6e9;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="620" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="620" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:620px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;border-radius:12px;overflow:hidden;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td align="left" class="ete-px" style="padding:28px 32px 20px;"><span class="ete-heading" style="font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;color:#1a2410;">Brightwatt</span><div class="ete-muted" style="padding-top:6px;font-family:Verdana, Geneva, sans-serif;font-size:11px;line-height:16px;letter-spacing:2px;text-transform:uppercase;color:#6c7562;">Energy for homes</div></td></tr>
<tr><td align="left" class="ete-px" style="padding:40px 32px;"><p style="margin:0 0 12px;font-family:Verdana, Geneva, sans-serif;font-size:12px;line-height:16px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#3f6212;text-align:left;">October statement</p><h1 class="ete-heading ete-h1" style="margin:0;font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:32px;line-height:40px;font-weight:700;color:#1a2410;text-align:left;mso-line-height-rule:exactly;">$84.60 due by 18 November</h1><p class="ete-text" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:17px;line-height:27px;color:#3a4232;padding-top:14px;text-align:left;">Account BW-772014. You used 412 kWh this month, 8% less than September.</p></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/brightwatt-usage.png" alt="Bar chart of twelve months of energy use with the latest month highlighted" width="556" height="278" class="ete-fluid" style="display:block;width:556px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;border-radius:12px;"></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><h2 class="ete-heading ete-h2" style="margin:0;font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:24px;line-height:32px;font-weight:700;color:#1a2410;text-align:left;mso-line-height-rule:exactly;">Your bill</h2><p class="ete-muted" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:14px;line-height:22px;color:#6c7562;padding-top:4px;">Period 1 to 31 October 2026</p><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:16px;"><tr><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #e2eadb;font-family:Verdana, Geneva, sans-serif;font-size:15px;line-height:22px;color:#3a4232;"><strong>Electricity used</strong><br><span class="ete-muted" style="color:#6c7562;font-size:13px;">412 kWh at $0.16 per kWh</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #e2eadb;font-family:Verdana, Geneva, sans-serif;font-size:15px;line-height:22px;color:#3a4232;;white-space:nowrap;">$65.92</td></tr><tr><td class="ete-text ete-border" valign="top" style="padding:14px 0;border-bottom:1px solid #e2eadb;font-family:Verdana, Geneva, sans-serif;font-size:15px;line-height:22px;color:#3a4232;"><strong>Standing charge</strong><br><span class="ete-muted" style="color:#6c7562;font-size:13px;">31 days at $0.45 per day</span></td><td class="ete-text ete-border" align="right" valign="top" style="padding:14px 0;border-bottom:1px solid #e2eadb;font-family:Verdana, Geneva, sans-serif;font-size:15px;line-height:22px;color:#3a4232;;white-space:nowrap;">$13.95</td></tr></table><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top:8px;"><tr><td class="ete-muted" style="padding:4px 0;font-family:Verdana, Geneva, sans-serif;font-size:15px;line-height:22px;color:#6c7562;">Subtotal</td><td class="ete-text" align="right" style="padding:4px 0;font-family:Verdana, Geneva, sans-serif;font-size:15px;line-height:22px;color:#3a4232;">$79.87</td></tr><tr><td class="ete-muted" style="padding:4px 0;font-family:Verdana, Geneva, sans-serif;font-size:15px;line-height:22px;color:#6c7562;">Tax (5.9%)</td><td class="ete-text" align="right" style="padding:4px 0;font-family:Verdana, Geneva, sans-serif;font-size:15px;line-height:22px;color:#3a4232;">$4.73</td></tr><tr><td class="ete-heading" style="padding:12px 0 0;border-top:2px solid #1a2410;font-family:Verdana, Geneva, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#1a2410;">Amount due</td><td class="ete-heading" align="right" style="padding:12px 0 0;border-top:2px solid #1a2410;font-family:Verdana, Geneva, sans-serif;font-size:17px;line-height:24px;font-weight:700;color:#1a2410;">$84.60</td></tr></table></td></tr>
<tr><td align="left" class="ete-px" style="padding:16px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td align="center"><!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/pay" style="height:48px;v-text-anchor:middle;width:163px;" arcsize="17%" strokecolor="#3f6212" fillcolor="#3f6212"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Pay my bill</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn" href="https://example.com/pay" style="display:inline-block;background-color:#3f6212;border:1px solid #3f6212;line-height:48px;border-radius:8px;color:#ffffff;font-family:Verdana, Geneva, sans-serif;font-size:16px;font-weight:700;text-align:center;text-decoration:none;padding:0 28px;-webkit-text-size-adjust:none;mso-hide:all;"><span class="ete-btn-text" style="color:#ffffff;">Pay my bill</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:12px 20px 0;"><div dir="rtl" style="font-size:0;text-align:left;display:flex;flex-wrap:wrap;"><!--[if mso]><table role="presentation" width="580" dir="rtl" cellpadding="0" cellspacing="0" border="0"><tr><td width="257" valign="middle"><![endif]--><div class="ete-stack" dir="ltr" style="display:inline-block;vertical-align:middle;min-width:44.31%;max-width:100%;width:44.31%;width:calc((464px - 100%) * 464);font-size:16px;text-align:left;align-self:flex-start;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 12px 16px;"><img src="https://emailtemplateexamples.com/wp-content/plugins/ete-core/assets/template-images/brightwatt-tip.png" alt="Glowing yellow light bulb with two green leaves" width="233" height="175" class="ete-fluid-cap" style="display:block;width:233px;max-width:100%;height:auto;border:0;outline:none;text-decoration:none;width:100%;max-width:280px;margin:0 auto;"></td></tr></table></div><!--[if mso]></td><td width="323" valign="middle"><![endif]--><div class="ete-stack" dir="ltr" style="display:inline-block;vertical-align:middle;min-width:55.68%;max-width:100%;width:55.68%;width:calc((464px - 100%) * 464);font-size:16px;text-align:left;align-self:center;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-cell" style="padding:4px 12px 16px;"><h3 class="ete-heading" style="margin:0;font-family:'Trebuchet MS', Tahoma, sans-serif;font-size:19px;line-height:26px;font-weight:700;color:#1a2410;text-align:left;mso-line-height-rule:exactly;">Tip for November</h3><p class="ete-text" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:15px;line-height:24px;color:#3a4232;padding-top:8px;">Lower your heating by one degree at night. Most homes save about 6% on the next bill and nobody notices the change under a blanket.</p></td></tr></table></div><!--[if mso]></td></tr></table><![endif]--></div></td></tr>
<tr><td align="left" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:13px;line-height:21px;color:#6c7562;line-height:20px;text-align:left;"><strong>Brightwatt Energy</strong><br>40 Grid Lane, Sacramento, CA 95814</p><p class="ete-muted" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:13px;line-height:21px;color:#6c7562;line-height:20px;text-align:left;padding-top:10px;">Statement email for your Brightwatt account.</p><p class="ete-muted" style="margin:0;font-family:Verdana, Geneva, sans-serif;font-size:13px;line-height:21px;color:#6c7562;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#6c7562;text-decoration:underline;">Unsubscribe</a></p></td></tr>
</table>
</td></tr>
<tr><td align="center" class="ete-muted" style="padding:20px 12px 0;font-family:Verdana, Geneva, sans-serif;font-size:12px;line-height:18px;color:#6c7562;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#6c7562;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Mailgun Transactional Email Templates by Mailgun, MIT license.
About this template
Utility customers open a bill email for two numbers: how much and by when. This statement for Brightwatt Energy, a sample supplier, answers both in the first lines, then shows how this month compares with the rest of the year.
A bar chart illustration in fresh greens shows twelve months of use, with the current month darker. The bill lines list energy used, the standing charge and tax, with a bold total. A pay button follows. At the end, a light bulb picture sits next to a short saving tip that suits the season.
Change the tip each month so the email stays worth opening. Put the amount and due date in the subject line. If the customer pays by direct debit, swap the pay button for a line with the debit date.
Use it in your email tool
- Click Copy HTML, or download the .html file.
- In Mailchimp, Brevo, HubSpot or Klaviyo, start a new email with the custom HTML or code editor and paste it in.
- Change the text, links and images. Map merge tags such as {{first_name}} and {{unsubscribe_url}} to the tags of your tool.
- Send a test to yourself on desktop and phone before you send it to your list.
Sections in this email
- Wordmark
- Amount due
- Usage chart illustration
- Bill lines and total
- Pay button
- Saving tip with picture
- Footer
Subject line ideas
- Your October bill: $84.60 due 18 November
- Brightwatt statement for October
- Your energy use this month, plus one saving tip
Preview text idea
Your October energy bill is $84.60, due 18 November. See your usage chart.