- Product launch
- and Promotional, Announcement
Plain Note With One Button email template
A plain, personal note on a white card with one full width blue button in the middle. No logo, no images, just a few lines and a single next step.
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>Plain Note With One Button</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:#0f1114!important;}
.ete-content{background-color:#1a1d21!important;}
.ete-text{color:#d7dade!important;}
.ete-heading{color:#ffffff!important;}
.ete-muted{color:#9a9ea6!important;}
.ete-link{color:#7ab0ff!important;}
.ete-border{border-color:#2c3036!important;}
.ete-panel{background-color:#22262b!important;border-color:#2c3036!important;}
.ete-btn{background-color:#3d8bff!important;border-color:#3d8bff!important;}
.ete-btn-text{color:#ffffff!important;}
.ete-btn-outline{border-color:#3d8bff!important;}
.ete-btn-outline-text{color:#3d8bff!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:#d7dade!important;}
[data-ogsc] .ete-heading{color:#ffffff!important;}
[data-ogsc] .ete-muted{color:#9a9ea6!important;}
[data-ogsc] .ete-link{color:#7ab0ff!important;}
[data-ogsb] .ete-body,[data-ogsb] .ete-bg{background-color:#0f1114!important;}
[data-ogsb] .ete-content{background-color:#1a1d21!important;}
[data-ogsb] .ete-panel{background-color:#22262b!important;border-color:#2c3036!important;}
</style>
</head>
<body class="ete-body" style="margin:0;padding:0;width:100%;background-color:#f4f5f6;">
<!-- 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;">Your forms are built. One click and you can start sharing them. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ </div>
<table role="presentation" class="ete-bg" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;background-color:#f4f5f6;">
<tr><td align="center" class="ete-outer" 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="ete-container" width="600" cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:600px;margin:0 auto;">
<tr><td class="ete-content" style="background-color:#ffffff;border-radius:16px;overflow:hidden;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr><td height="8" style="height:8px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </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:#1f2329;text-align:left;">Hi {{first_name}},<br>
<br>
Your first three forms are built and saved in Tidyform. The only thing left is to turn on sharing, so people can start filling them in.</p></td></tr>
<tr><td align="center" class="ete-px" style="padding:16px 32px;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" align="center" width="100%"><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/forms/share" style="height:48px;v-text-anchor:middle;width:536px;" arcsize="8%" strokecolor="#0867ec" fillcolor="#0867ec"><w:anchorlock/><center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">Turn on sharing</center></v:roundrect><![endif]--><!--[if !mso]><!--><a class="ete-btn ete-btn-full" href="https://example.com/forms/share" style="display:inline-block;background-color:#0867ec;border:1px solid #0867ec;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;width:100%;box-sizing:border-box;"><span class="ete-btn-text" style="color:#ffffff;">Turn on sharing</span></a><!--<![endif]--></td></tr></table></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:#1f2329;text-align:left;">Until sharing is on, each form only works for you. It takes one click and you can turn it off again at any time.<br>
<br>
Have a good week,<br>
Mara from Tidyform</p></td></tr>
<tr><td height="8" style="height:8px;font-size:0;line-height:0;mso-line-height-rule:exactly;"> </td></tr>
<tr><td align="center" 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:#7d828a;line-height:20px;text-align:center;"><strong>Tidyform Ltd</strong><br>7 Linen Hall Street, Belfast BT2 8BG</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#7d828a;line-height:20px;text-align:center;padding-top:10px;">You get this email because you made a Tidyform account.</p><p class="ete-muted" style="margin:0;font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:13px;line-height:21px;color:#7d828a;line-height:20px;text-align:center;padding-top:10px;"><a class="ete-link" href="{{unsubscribe_url}}" style="color:#7d828a;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:#7d828a;">Made with <a class="ete-link" href="https://emailtemplateexamples.com/" style="color:#7d828a;text-decoration:underline;">Email Template Examples</a></td></tr>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td></tr>
</table>
</body>
</html>
Adapted from Responsive HTML Email Template by Lee Munroe, MIT license.
About this template
The simplest layout in the library: a white card on a light grey page, a greeting, two short paragraphs and one full width blue button. It reads like a note from a person, not a campaign.
Use it when you need one action and nothing else: finish a setup step, confirm a change, answer a short request or open a new feature. The button sits between the two paragraphs, so the reader sees it before scrolling, and the second paragraph explains why it matters.
The footer is small grey text with the company address and an unsubscribe link, centered under the card.
The structure comes from one of the most copied open source email templates, built to show that a clear call to action needs very little design. Keep the copy short. If you add more than one button, this is no longer the right template.
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
- Greeting
- Short note
- Full width button
- Why it matters
- Footer
Subject line ideas
- One last step to finish your workspace
- Quick favor: two minutes of your time
- {{first_name}}, your forms are ready to share
Preview text idea
Your forms are built. One click and you can start sharing them.