DEV Community

Ricardo
Ricardo

Posted on

An HTML invoice template that survives Gmail and Outlook (free, copy-paste)

#webdev #freelance #html #tutorial

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>you@email.com</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>ap@acme.com</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>
Enter fullscreen mode Exit fullscreen mode

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 /invoice skill 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.

Top comments (0)