Free HTML Email Templates (Table-Based and Dark-Mode Ready)

A reliable HTML email uses nested tables for layout, inline styles, a content width of about 600 pixels, buttons made from padded links rather than images, and alt text on every image. The eight templates below follow those rules, support dark mode where clients allow it, and can be edited and previewed live before you copy them.

The eight templates
TemplateSent when
WelcomeSomeone signs up
ReceiptA payment succeeds
Password resetSomeone asks to reset
NewsletterRegular news
Verify emailAfter sign-up
Order shippedAn order leaves
Event invitationInviting customers
Feedback requestAfter a visit or order

Updated

Edit the code on the left of any template and the preview on the right updates. The previews are rendered by your browser, so treat them as a guide: email clients vary, which is why the testing checklist at the bottom matters.

Prefer filling in a form? Use the HTML email template builder.

Eight templates, live

Welcome email

Thanks the person, says what happens next and offers one clear action.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Welcome to Harbour Bakery</title>
  <style>
    @media (prefers-color-scheme: dark) {
      .bg { background: #111111 !important; }
      .card { background: #1c1c1c !important; }
      .text { color: #eeeeee !important; }
      .muted { color: #aaaaaa !important; }
    }
    @media (max-width: 620px) { .card { padding: 24px !important; } }
  </style>
</head>
<body style="margin:0;padding:0;">
  <div style="display:none;max-height:0;overflow:hidden;">Your account is ready. Here is how to order your first loaf.</div>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
    <tr><td align="center" style="padding:24px 12px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
        <tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">Welcome, Sam</td></tr>
        <tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Thanks for joining Harbour Bakery. You can now order ahead and collect from the counter without queueing.</td></tr>
        <tr><td style="padding:8px 0 24px;">
          <table role="presentation" cellpadding="0" cellspacing="0"><tr>
            <td style="border-radius:8px;background:#2563eb;">
              <a href="https://example.com/order" style="display:inline-block;padding:14px 28px;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:8px;">Place your first order</a>
            </td>
          </tr></table>
        </td></tr>
        <tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">Questions? Just reply to this email.</td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

Receipt

A nested table keeps item names and prices aligned in every client, including old desktop ones.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Your receipt</title>
  <style>
    @media (prefers-color-scheme: dark) {
      .bg { background: #111111 !important; }
      .card { background: #1c1c1c !important; }
      .text { color: #eeeeee !important; }
      .muted { color: #aaaaaa !important; }
    }
    @media (max-width: 620px) { .card { padding: 24px !important; } }
  </style>
</head>
<body style="margin:0;padding:0;">
  <div style="display:none;max-height:0;overflow:hidden;">Receipt for order #1042, total $24.50.</div>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
    <tr><td align="center" style="padding:24px 12px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
        <tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">Thanks for your order</td></tr>
        <tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Order #1042, paid on 5 March 2026.</td></tr>
        <tr><td>
          <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5;">
            <tr><td class="text" style="padding:8px 0;font-size:15px;color:#333333;">Sourdough loaf x 2</td><td class="text" align="right" style="padding:8px 0;font-size:15px;color:#333333;">$14.00</td></tr>
            <tr><td class="text" style="padding:8px 0;font-size:15px;color:#333333;">Cinnamon buns x 3</td><td class="text" align="right" style="padding:8px 0;font-size:15px;color:#333333;">$9.00</td></tr>
            <tr><td class="text" style="padding:8px 0;font-size:15px;color:#333333;">Paper bag</td><td class="text" align="right" style="padding:8px 0;font-size:15px;color:#333333;">$1.50</td></tr>
            <tr><td class="text" style="padding:8px 0;font-size:15px;color:#333333;font-weight:bold;">Total</td><td class="text" align="right" style="padding:8px 0;font-size:15px;color:#333333;font-weight:bold;">$24.50</td></tr>
          </table>
        </td></tr>
        <tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">Harbour Bakery, 12 Quay Street, Portsmouth NH. Keep this email as your receipt.</td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

Password reset

Short, with the expiry time and what to do if the person did not ask for it. Include the link as text too, for clients that block buttons.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Reset your password</title>
  <style>
    @media (prefers-color-scheme: dark) {
      .bg { background: #111111 !important; }
      .card { background: #1c1c1c !important; }
      .text { color: #eeeeee !important; }
      .muted { color: #aaaaaa !important; }
    }
    @media (max-width: 620px) { .card { padding: 24px !important; } }
  </style>
</head>
<body style="margin:0;padding:0;">
  <div style="display:none;max-height:0;overflow:hidden;">Use this link within 30 minutes to choose a new password.</div>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
    <tr><td align="center" style="padding:24px 12px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
        <tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">Reset your password</td></tr>
        <tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">We received a request to reset the password for your account. The link works for 30 minutes.</td></tr>
        <tr><td style="padding:8px 0 24px;">
          <table role="presentation" cellpadding="0" cellspacing="0"><tr>
            <td style="border-radius:8px;background:#2563eb;">
              <a href="https://example.com/reset?token=TOKEN" style="display:inline-block;padding:14px 28px;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:8px;">Choose a new password</a>
            </td>
          </tr></table>
        </td></tr>
        <tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Or paste this link into your browser:<br><span style="word-break:break-all;color:#2563eb;">https://example.com/reset?token=TOKEN</span></td></tr>
        <tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">Did not ask for this? Ignore this email; your password will not change.</td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

Newsletter

One story per block with a heading, a sentence and a link. The image URL here is a placeholder, so the preview shows what readers see with images blocked: the alt text in a box of the right size.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>March at the bakery</title>
  <style>
    @media (prefers-color-scheme: dark) {
      .bg { background: #111111 !important; }
      .card { background: #1c1c1c !important; }
      .text { color: #eeeeee !important; }
      .muted { color: #aaaaaa !important; }
    }
    @media (max-width: 620px) { .card { padding: 24px !important; } }
  </style>
</head>
<body style="margin:0;padding:0;">
  <div style="display:none;max-height:0;overflow:hidden;">New spring loaves, a weekend workshop and longer Saturday hours.</div>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
    <tr><td align="center" style="padding:24px 12px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
        <tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">March at the bakery</td></tr>
        <tr><td style="padding-bottom:16px;"><img src="https://example.com/images/spring-loaves.jpg" width="520" height="220" alt="Three spring loaves on a board" style="display:block;width:100%;max-width:520px;height:auto;border-radius:8px;"></td></tr>
        <tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;"><strong>Spring loaves are back.</strong> Wild garlic and cheddar every Thursday until May.</td></tr>
        <tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;"><strong>Bread workshop, 14 March.</strong> Three hours, two loaves to take home, eight places.</td></tr>
        <tr><td style="padding:8px 0 24px;">
          <table role="presentation" cellpadding="0" cellspacing="0"><tr>
            <td style="border-radius:8px;background:#2563eb;">
              <a href="https://example.com/workshop" style="display:inline-block;padding:14px 28px;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:8px;">Book a place</a>
            </td>
          </tr></table>
        </td></tr>
        <tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">You get this because you signed up at our counter. <a href="https://example.com/unsubscribe" style="color:#6b6b6b;">Unsubscribe</a></td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

Verify email address

Used after sign-up. A code as well as a button helps people who open the email on another device.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Confirm your email</title>
  <style>
    @media (prefers-color-scheme: dark) {
      .bg { background: #111111 !important; }
      .card { background: #1c1c1c !important; }
      .text { color: #eeeeee !important; }
      .muted { color: #aaaaaa !important; }
    }
    @media (max-width: 620px) { .card { padding: 24px !important; } }
  </style>
</head>
<body style="margin:0;padding:0;">
  <div style="display:none;max-height:0;overflow:hidden;">Your code is 482 913.</div>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
    <tr><td align="center" style="padding:24px 12px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
        <tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">Confirm your email</td></tr>
        <tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Enter this code in the app, or tap the button.</td></tr>
        <tr><td class="text" style="font-size:32px;letter-spacing:8px;font-weight:bold;color:#111111;padding:8px 0 16px;">482 913</td></tr>
        <tr><td style="padding:8px 0 24px;">
          <table role="presentation" cellpadding="0" cellspacing="0"><tr>
            <td style="border-radius:8px;background:#2563eb;">
              <a href="https://example.com/verify?token=TOKEN" style="display:inline-block;padding:14px 28px;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:8px;">Confirm email</a>
            </td>
          </tr></table>
        </td></tr>
        <tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">The code expires in 15 minutes.</td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

Order shipped

Puts the tracking link first; that is what the reader opened the email for.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>Your order is on its way</title>
  <style>
    @media (prefers-color-scheme: dark) {
      .bg { background: #111111 !important; }
      .card { background: #1c1c1c !important; }
      .text { color: #eeeeee !important; }
      .muted { color: #aaaaaa !important; }
    }
    @media (max-width: 620px) { .card { padding: 24px !important; } }
  </style>
</head>
<body style="margin:0;padding:0;">
  <div style="display:none;max-height:0;overflow:hidden;">Order #1042 has shipped. Track it here.</div>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
    <tr><td align="center" style="padding:24px 12px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
        <tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">Your order is on its way</td></tr>
        <tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Order #1042 left our kitchen this morning and should arrive on Thursday.</td></tr>
        <tr><td style="padding:8px 0 24px;">
          <table role="presentation" cellpadding="0" cellspacing="0"><tr>
            <td style="border-radius:8px;background:#2563eb;">
              <a href="https://example.com/track/1042" style="display:inline-block;padding:14px 28px;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:8px;">Track your parcel</a>
            </td>
          </tr></table>
        </td></tr>
        <tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">Delivery to: 4 Pine Lane, Portsmouth NH 03801</td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

Event invitation

Date, time and place in a block that is easy to scan, then the single action.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>You are invited: spring open day</title>
  <style>
    @media (prefers-color-scheme: dark) {
      .bg { background: #111111 !important; }
      .card { background: #1c1c1c !important; }
      .text { color: #eeeeee !important; }
      .muted { color: #aaaaaa !important; }
    }
    @media (max-width: 620px) { .card { padding: 24px !important; } }
  </style>
</head>
<body style="margin:0;padding:0;">
  <div style="display:none;max-height:0;overflow:hidden;">Saturday 21 March, 10 am to 2 pm. Free tastings.</div>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
    <tr><td align="center" style="padding:24px 12px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
        <tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">Spring open day</td></tr>
        <tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Come and see the ovens, meet the bakers and try this season's loaves.</td></tr>
        <tr><td class="text" style="font-size:16px;line-height:26px;color:#333333;padding:12px 16px;background:#f4f4f5;border-radius:8px;"><strong>Saturday 21 March</strong><br>10 am to 2 pm<br>12 Quay Street, Portsmouth</td></tr>
        <tr><td style="height:16px;"></td></tr>
        <tr><td style="padding:8px 0 24px;">
          <table role="presentation" cellpadding="0" cellspacing="0"><tr>
            <td style="border-radius:8px;background:#2563eb;">
              <a href="https://example.com/open-day" style="display:inline-block;padding:14px 28px;font-size:16px;font-weight:bold;color:#ffffff;text-decoration:none;border-radius:8px;">Save your spot</a>
            </td>
          </tr></table>
        </td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

Feedback request

One question with one-tap answers gets far more replies than a link to a long survey.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="color-scheme" content="light dark">
  <meta name="supported-color-schemes" content="light dark">
  <title>How was your order?</title>
  <style>
    @media (prefers-color-scheme: dark) {
      .bg { background: #111111 !important; }
      .card { background: #1c1c1c !important; }
      .text { color: #eeeeee !important; }
      .muted { color: #aaaaaa !important; }
    }
    @media (max-width: 620px) { .card { padding: 24px !important; } }
  </style>
</head>
<body style="margin:0;padding:0;">
  <div style="display:none;max-height:0;overflow:hidden;">One tap to tell us how we did.</div>
  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="bg" style="background:#f4f4f5;">
    <tr><td align="center" style="padding:24px 12px;">
      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" class="card" style="max-width:600px;background:#ffffff;border-radius:12px;padding:40px;font-family:Arial,Helvetica,sans-serif;">
        <tr><td class="text" style="font-size:24px;line-height:32px;font-weight:bold;color:#111111;padding-bottom:12px;">How was your order?</td></tr>
        <tr><td class="text" style="font-size:16px;line-height:24px;color:#333333;padding-bottom:16px;">Tap one. It takes a second and helps us bake better.</td></tr>
        <tr><td style="padding-bottom:16px;">
          <table role="presentation" cellpadding="0" cellspacing="0"><tr>
            <td style="padding-right:8px;"><a href="https://example.com/feedback?r=great" style="display:inline-block;padding:12px 18px;border:1px solid #d4d4d8;border-radius:8px;color:#111111;text-decoration:none;font-size:15px;">Great</a></td>
            <td style="padding-right:8px;"><a href="https://example.com/feedback?r=okay" style="display:inline-block;padding:12px 18px;border:1px solid #d4d4d8;border-radius:8px;color:#111111;text-decoration:none;font-size:15px;">Okay</a></td>
            <td style="padding-right:8px;"><a href="https://example.com/feedback?r=not-good" style="display:inline-block;padding:12px 18px;border:1px solid #d4d4d8;border-radius:8px;color:#111111;text-decoration:none;font-size:15px;">Not good</a></td>
          </tr></table>
        </td></tr>
        <tr><td class="muted" style="font-size:13px;line-height:20px;color:#6b6b6b;padding-top:16px;">Reply to this email if you would like to tell us more.</td></tr>
      </table>
    </td></tr>
  </table>
</body>
</html>

Why the code looks like this

Rules that make HTML email render everywhere
RuleWhy
Lay out with tables (role="presentation")Some desktop clients still ignore flexbox, grid and many positioning rules
Inline the important stylesSome clients and webmail views strip or ignore style blocks
Keep the content width about 600pxFits the reading pane of most clients
Make buttons from a padded link inside a coloured cellSurvives clients that block images and ignore some CSS
Set width, height and alt on every imageImages are often blocked until the reader allows them
Add a hidden preheaderControls the preview text shown after the subject line
Use color-scheme meta and prefers-color-schemeClients that support dark mode use your dark colours instead of inverting
Include an unsubscribe link in marketing emailRequired by anti-spam laws and by large mailbox providers

Before you send

Testing checklist
TestHow
Real clientsSend to accounts on the big webmail services, a desktop client and a phone
Images offTurn off image loading and check the email still makes sense
Dark modeSwitch the phone and the desktop client to dark mode
LinksClick every link, including the unsubscribe link
Plain-text partSend a text version too; some readers and filters use it
Spam checkAuthenticate your domain (SPF, DKIM, DMARC) before sending in volume

Plain text matters too

Send a plain-text version alongside the HTML. Most email platforms generate one; read it once, because a receipt or reset link must still make sense without formatting.

How it works

  1. Pick the template that matches the email you need.
  2. Change the text, links and colours in the code box and watch the preview.
  3. Copy the HTML into your email platform's custom HTML option.
  4. Send tests to real inboxes on phone and desktop, in light and dark mode.

Tips

Frequently asked questions

Why do HTML emails still use tables?

Some email clients, notably older desktop ones, render with engines that ignore modern CSS layout. Tables are the one layout method that works across all of them.

How do I make an email work in dark mode?

Add the color-scheme meta tags and a prefers-color-scheme media query with your dark colours. Clients that support it use them; others may invert colours themselves, so avoid text baked into images and test both modes.

Can I use these templates commercially?

Yes. We wrote them for this page; copy, change and send them in any project.

What is a bulletproof button?

A button built from a link with padding inside a coloured table cell instead of an image. It still shows and works when images are blocked.

Related: HTML email template builder, Password reset email template, Email signature generator, Email subject line tester, All free tools.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.

More in Guides

We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.

Product

Who It's For

Features

Resources

Company

View Sitemap