Simple Password Reset email template
A very minimal password reset email: one heading, one short paragraph, a reset button, a 24 hour expiry line and a quiet security note. No images.
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>Simple Password Reset</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;}
}
@media (prefers-color-scheme: dark){
.ete-body,.ete-bg{background-color:#0e0f11!important;}
.ete-content{background-color:#181a1e!important;}
.ete-text{color:#d2d5db!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#9aa0aa!important;}
.ete-link{color:#7cc4a0!important;}
.ete-border{border-color:#2c2f35!important;}
.ete-panel{background-color:#202328!important;border-color:#2c2f35!important;}
.ete-btn{background-color:#e5e7eb!important;border-color:#e5e7eb!important;}
.ete-btn-text{color:#111827!important;}
.ete-btn-outline{border-color:#e5e7eb!important;}
.ete-btn-outline-text{color:#e5e7eb!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:#d2d5db!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#9aa0aa!important;}
[data-ogsc] .ete-link{color:#7cc4a0!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0e0f11!important;}
[data-ogsb] .ete-content{background-color:#181a1e!important;}
[data-ogsb] .ete-panel{background-color:#202328!important;border-color:#2c2f35!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f1f2f4;">
<!-- 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;">Use this link within 24 hours to choose a new Notepine password. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f1f2f4;">
<tr><td align="center" class="ete-outer" style="padding:24px 12px;">
<!--[if mso]><table role="presentation" width="520" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table role="presentation" class="ete-container" width="520" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:520px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;border-radius:4px;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:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-0.3px;color:#15171c;">Notepine</span></td></tr>
<tr><td class="ete-px" style="padding:24px 32px 8px;"><h1 class="ete-heading ete-h1" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:32px;line-height:40px;font-weight:700;color:#15171c;text-align:left;mso-line-height-rule:exactly;">Reset your password</h1></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-text" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;line-height:26px;color:#3c4048;text-align:left;">Hi {{first_name}}, we got a request to reset the password for your Notepine account. Click the button below to pick a new one.</p></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/reset/2b91f" style="height:48px;v-text-anchor:middle;width:253px;" arcsize="8%" strokecolor="#1f2937" fillcolor="#1f2937"><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="ete-btn" href="https://example.com/reset/2b91f" style="display:inline-block;background-color:#1f2937;border:1px solid #1f2937;line-height:48px;border-radius:4px;color:#ffffff;font-family:'Helvetica Neue', Helvetica, Arial, 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;">Choose a new password</span></a><!--<![endif]--></td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:14px;line-height:22px;color:#70757f;text-align:left;">This link works for 24 hours and only once.</p></td></tr>
<tr><td class="ete-px" style="padding:16px 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="ete-border" style="border-top:1px solid #e4e6ea;font-size:0;line-height:0;"> </td></tr></table></td></tr>
<tr><td class="ete-px" style="padding:8px 32px;"><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#70757f;text-align:left;">Did not ask for this? You can ignore this email. Your password stays the same. If you keep getting these, <a class="ete-link" style="color:#2f6f4f;text-decoration:underline;" href="https://example.com/support">tell our support team</a>.</p></td></tr>
<tr><td align="left" class="ete-px" style="padding:28px 32px 32px;"><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#70757f;line-height:20px;text-align:left;"><strong>Notepine</strong><br>21 Cedar Lane, Asheville, NC 28801</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#70757f;line-height:20px;text-align:left;padding-top:10px;">Account email for your Notepine login.</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#70757f;line-height:20px;text-align:left;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#70757f;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:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:12px;line-height:18px;color:#70757f;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#70757f;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Postmark Transactional Email Templates by Wildbit (now ActiveCampaign), MIT license.
About this template
Password reset emails should be boring in the best way. This one, made for a notes app called Notepine, has a single job and nothing that distracts from it. A narrow white card on light grey holds one heading, one paragraph and one button.
A line under the button says the link expires in 24 hours. A small divider separates the security note in muted grey, which tells people what to do if they did not ask for the reset. There are no images, so it loads fast and has little that can break.
Send it instantly. Use a plain subject such as Reset your Notepine password, because people search their inbox for exactly that. Never put the old password or the new one in the email.
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
- Heading
- Short message
- Reset button
- Expiry note
- Divider
- Security note
- Footer
Subject line ideas
- Reset your Notepine password
- Your password reset link
- Here is the link you asked for
Preview text idea
Use this link within 24 hours to choose a new Notepine password.