An HTML invoice template that survives Gmail and Outlook (free, copy-paste)
Most HTML invoice templates you find online break the moment you paste them into an email. Gmail strips your <style> block. Outlook ignores flexbox entirely. What looked clean in the browser arrives as soup. I hit this
Most HTML invoice templates you find online break the moment you paste them into an email. Gmail strips your <style> block. Outlook ignores flexbox entirely. What looked clean in the browser arrives as soup.
I hit this building an invoice generator, so here's the template that actually survives email clients — and the two rules that make it work.
The two rules
1. Inline styles only. Most mail clients strip <style> tags and external CSS. Every style must live on the element itself.
2. Tables for layout, not flexbox/grid. Outlook renders email with Word's engine (really). Flexbox and grid don't exist there. <table> layout is ugly to write and bulletproof to send.
The template
<div style="max-width:640px;margin:0 auto;font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#1a1f1c;line-height:1.5">
<table width="100%" cellpadding="0" cellspacing="0" style="margin-bottom:28px"><tr>
<td style="font-size:26px;font-weight:700">INVOICE</td>
<td align="right" style="font-size:14px;color:#5f6a62">
<strong style="color:#1a1f1c">INV-0001</strong><br>
Issued: Jul 19, 2026<br>
<strong style="color:#1a1f1c">Due: Aug 3, 2026</strong> (Net-15)
</td>
</tr></table>
<table width="100%" cellpadding="0" cellspacing="0" style="margin-bottom:28px;font-size:14px"><tr>
<td valign="top"><span style="color:#5f6a62;font-size:12px;text-transform:uppercase">From</span><br><strong>Your Name</strong><br>[email protected]</td>
<td valign="top" align="right"><span style="color:#5f6a62;font-size:12px;text-transform:uppercase">Bill to</span><br><strong>Acme Corp</strong><br>[email protected]</td>
</tr></table>
<table width="100%" cellpadding="0" cellspacing="0" style="font-size:14px;border-collapse:collapse">
<tr style="color:#5f6a62;font-size:12px;text-transform:uppercase">
<td style="padding:8px 0;border-bottom:1px solid #d8ded9">Description</td>
<td align="right" style="padding:8px 0;border-bottom:1px solid #d8ded9">Qty</td>
<td align="right" style="padding:8px 0;border-bottom:1px solid #d8ded9">Rate</td>
<td align="right" style="padding:8px 0;border-bottom:1px solid #d8ded9">Amount</td>
</tr>
<tr>
<td style="padding:10px 0;border-bottom:1px solid #eef1ee">Website fixes</td>
<td align="right" style="padding:10px 0;border-bottom:1px solid #eef1ee">12</td>
<td align="right" style="padding:10px 0;border-bottom:1px solid #eef1ee">$75.00</td>
<td align="right" style="padding:10px 0;border-bottom:1px solid #eef1ee">$900.00</td>
</tr>
<tr><td colspan="3" align="right" style="padding:12px 0 4px;color:#5f6a62">Subtotal</td><td align="right" style="padding:12px 0 4px">$900.00</td></tr>
<tr><td colspan="3" align="right" style="padding:10px 0;font-weight:700;font-size:16px;border-top:2px solid #1a1f1c">Total due</td><td align="right" style="padding:10px 0;font-weight:700;font-size:16px;border-top:2px solid #1a1f1c">$900.00</td></tr>
</table>
<p style="margin-top:26px;font-size:13px;color:#5f6a62"><strong style="color:#1a1f1c">Payment:</strong> [bank / PayPal / link]<br>Payment due by <strong>Aug 3, 2026</strong>. Thank you!</p>
</div>
Details that get you paid faster
A few deliberate choices in there, learned the hard way:
- A real due date, not just "Net-15." "Due: Aug 3" creates a deadline; "Net-30" creates a vague intention. This is the single field that most shortens payment time.
- Right-aligned money columns. Amounts scan instantly; misaligned numbers read as amateur.
- A payment-details line. A shocking number of invoices sit unpaid simply because they don't say how to pay.
- Bold total with a heavy top border. The client should find the number they owe without adding anything up.
If you don't want to fill it by hand
Two free options I maintain:
- Browser: a free invoice generator with this exact structure — fill it in, print or save as PDF. No signup.
-
Claude Code: the free
/invoiceskill builds the whole thing from a plain-English description ("12 hrs at $75 for Acme plus $40 hosting" → finished invoice):/plugin marketplace add ricardo-agent/freelancer-skills
Both are the free wedge of a larger freelance-admin pack, but the template above is yours regardless — copy it, adapt it, send it.
What else breaks for you in email HTML? Curious what workarounds others have landed on.
Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.