Plainwork

Plainwork / Mailroom Kit / Password reset email template (HTML + text)

Password reset email: what to put in it, with a free HTML and plain-text template

A password reset email is a security message, so it should be short, say who asked, state how long the link lasts, and tell the reader what to do if it was not them. Below is a checklist drawn from those requirements and a complete, working template (Mustache placeholders, table-based HTML plus a plain-text twin) that you can copy. It is the same password-reset email that ships in Mailroom Kit.

What a reset email needs

  1. A subject that says what it is. "Reset your password" beats a clever line; people search their inbox for it.
  2. Why they are getting it. One sentence naming the account: someone asked to reset the password for it.
  3. One button, and the raw link beneath it. Some clients block buttons or images; the visible URL is the fallback.
  4. The expiry and single use. Say how long the link works and that it works once. The template uses {{expires_in}}, so you write "60 minutes" or whatever your app enforces.
  5. An "if this was not you" line. Reassure that the current password still works until a new one is chosen, and give a way to reach support.
  6. A plain-text part with the same link. If the HTML and text carry different links, spam filters notice and some readers see the wrong one.
  7. No tracking on the link. A rewritten, redirecting reset URL is slower and looks like phishing.
  8. Small size. This one is 6.6 KB, far below the roughly 102 KB where Gmail reportedly clips (details).

Plain-text version (copy as is)

Reset your password

Hi {{first_name}},

Someone asked to reset the password for your Northfield account. If that was you, choose a new password with the button below.

Choose a new password:
{{reset_url}}

The link works for {{expires_in}} and once only. Your current password stays valid until you choose a new one.

NOTE: If you did not ask for this, you can ignore the email. If you keep getting these, write to us and we will look into it.

--
You received this because a password reset was requested for your Northfield account.
Questions? Write to [email protected].
Northfield Software Ltd, 12 Example Street, Sampletown AB1 2CD, United Kingdom

Replace Northfield, the support address and the postal address with yours. Placeholders are {{first_name}}, {{reset_url}} and {{expires_in}}.

HTML version

Show the full HTML source (6.6 KB)
<!doctype html>
<html lang="en" dir="ltr" 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="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>Reset your Northfield password</title>
<!--[if mso]><noscript><xml><o:OfficeDocumentSettings><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->
<style>body{margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}table{border-collapse:collapse}img{-ms-interpolation-mode:bicubic}a{overflow-wrap:anywhere}
@media only screen and (max-width:620px){.wrap{width:100%!important}.px{padding-left:20px!important;padding-right:20px!important}}
@media (prefers-color-scheme:dark){.pg{background-color:#10141b!important}.card{background-color:#1a212c!important}.tx{color:#eef1f6!important}.mu{color:#a9b4c4!important}.bd{border-color:#2f3a4a!important}.lk{color:#8fb0ff!important}.btn{background-color:#8fb0ff!important;color:#0d1526!important}.warn{background-color:#3a2c10!important;color:#ffe2a8!important}}</style>
</head>
<body class="pg" style="margin:0;padding:0;background-color:#f2f4f7;">
<div style="display:none;font-size:1px;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;mso-hide:all;">Choose a new password. The link works for {{expires_in}}.&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;&#847;&zwnj;&nbsp;</div>
<table role="presentation" class="pg" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color:#f2f4f7;"><tr><td align="center" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="wrap card" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;background-color:#ffffff;border-radius:10px;">
<tr><td class="px" style="padding:28px 32px 20px 32px;"><span class="tx" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;font-size:20px;line-height:28px;font-weight:700;color:#1b2330;">Northfield</span></td></tr>
<tr><td class="tx px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 8px 32px;font-size:22px;line-height:30px;font-weight:700;color:#1b2330;"><h1 style="margin:0;font-size:22px;line-height:30px;font-weight:700;color:#1b2330;" class="tx">Reset your password</h1></td></tr>
<tr><td class="tx px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 16px 32px;font-size:16px;line-height:24px;color:#1b2330;">Hi {{first_name}},</td></tr>
<tr><td class="tx px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 16px 32px;font-size:16px;line-height:24px;color:#1b2330;">Someone asked to reset the password for your Northfield account. If that was you, choose a new password with the button below.</td></tr>
<tr><td class="px" align="left" style="padding:8px 32px 20px 32px;">
<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{reset_url}}" style="height:48px;v-text-anchor:middle;width:250px;" arcsize="14%" stroke="f" fillcolor="#2a56c6"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Choose a new password</center></v:roundrect><![endif]-->
<!--[if !mso]><!--><a class="btn" href="{{reset_url}}" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;display:inline-block;min-height:48px;line-height:48px;padding:0 28px;border-radius:7px;background-color:#2a56c6;color:#ffffff;font-size:16px;font-weight:700;text-decoration:none;">Choose a new password</a><!--<![endif]-->
</td></tr>
<tr><td class="mu px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 20px 32px;font-size:14px;line-height:21px;color:#556070;">If the button does not work, paste this address into your browser:<br><a class="lk" href="{{reset_url}}" style="color:#2a56c6;word-break:break-all;">{{reset_url}}</a></td></tr>
<tr><td class="mu px" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;padding:0 32px 16px 32px;font-size:14px;line-height:21px;color:#556070;">The link works for {{expires_in}} and once only. Your current password stays valid until you choose a new one.</td></tr>
<tr><td class="px" style="padding:0 32px 20px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td class="warn" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;background-color:#fff4e0;color:#5c3a00;border-radius:7px;padding:14px 16px;font-size:15px;line-height:22px;">If you did not ask for this, you can ignore the email. If you keep getting these, write to us and we will look into it.</td></tr></table></td></tr>
<tr><td class="px bd" style="padding:12px 32px 28px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%"><tr><td class="mu bd" style="font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;border-top:1px solid #dde2ea;padding-top:16px;font-size:14px;line-height:21px;color:#556070;">You received this because a password reset was requested for your Northfield account.<br><br>Questions? Write to <a class="lk" href="mailto:[email protected]" style="color:#2a56c6;">[email protected]</a>.<br>Northfield Software Ltd, 12 Example Street, Sampletown AB1 2CD, United Kingdom</td></tr></table></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr></table>
</body>
</html>

It uses nested tables with inline styles and Outlook conditional comments for the button, no web fonts and no images, which is the conservative pattern for email clients. It has not been tested in every client; send it to your own Gmail, Outlook and Apple Mail accounts before relying on it.

Check it before you send

Paste the HTML into the free email HTML checker to see its size, missing alt text, link problems and contrast, in your browser with nothing uploaded. The other thirteen emails (verify address, magic link, sign-in code, welcome, invite, receipt, failed payment and more) are in the kit, and you can open four of them in the demo.

More from the catalogue

Other small tools

See everything →