Responsive Transactional Email Templates

<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> Responsive Transactional Email Templates | Postmark </title> <meta name="description" content="Responsive, well-tested, highly compatible, and nicely integrated templates."> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="globalsign-domain-verification" content="F0n5fUwYguswb99EGyC5qD87O15uv5VBUiX9yRrxX6"> <meta name="theme-color" content="#FFDE00"> <script>dataLayer = [{'siteType': 'landing', 'visitorIP': '8.222.208.146', 'doNotTrack': 0 }];</script> <link href="https://postmarkapp.com/dist/css/core.233bca689f85085cd63f.css" rel="stylesheet"> <link href="https://postmarkapp.com/dist/css/postmark.8eefa6ea9c9eef999806.css" rel="stylesheet"> <link rel="dns-prefetch" href="https://ssl.google-analytics.com"> <link rel="dns-prefetch" href="https://www.google-analytics.com"> <link rel="shortcut icon" href="/images/favicon.ico"> <link rel="apple-touch-icon" href="/images/apple-touch-icon.png"> <link rel="canonical" href="https://postmarkapp.com/email-templates"> <meta property="og:url" content="https://postmarkapp.com/email-templates"> <meta property="og:type" content="article"> <meta property="fb:app_id" content="244883355940334"> <meta property="og:title" content="Responsive Transactional Email Templates"> <meta property="og:description" content="Responsive, well-tested, highly compatible, and nicely integrated templates."> <meta property="og:image" content="https://craft-assets.postmarkapp.com/blog/_facebook/social-why-templates.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta name="twitter:title" content="Responsive Transactional Email Templates"> <meta name="twitter:description" content="Responsive, well-tested, highly compatible, and nicely integrated templates."> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://craft-assets.postmarkapp.com/blog/_twitter/2270/social-why-templates.jpg"> <meta name="twitter:site" content="@postmarkapp"> <meta name="twitter:creator" content="@diraq"> <meta name="slack-app-id" content="A8LSJN934"> </head> <body> <div class="alert alert--info alert--centered" id="alert-346478"> <div class="u-container alert_container"> <div class="alert_message"> <strong>Grow with us: Join Postmark's new referral partner program and start earning</strong> </div> <div class="alert_actions"> <a href="https://postmarkapp.com/lp/referral-partner-program" target="_blank" class="cta-btn cta-btn--inverted">Learn more</a> </div> </div> <a href="#" class="alert_dismiss" data-id="346478">x</a> </div> <header class="header "> <div class="u-container header_container"> <div class="header_branding"> <a href="https://postmarkapp.com/" class="header_postmark-logo">Postmark</a> <div class="header_actions"> <a href="https://account.postmarkapp.com/login" class="header_login cta-btn cta-btn--small ">Log In</a> <button class="header_hamburger js-nav-mobile-button" aria-haspopup="true"> <span></span> <span></span> <span></span> </button> </div> </div> <nav class="nav nav--header nav--desktop" role="navigation" aria-label="Main"> <ul class="nav_list"> <li class="nav_item "> <a href="https://postmarkapp.com/why" class="nav_link">Why Postmark?</a> </li> <li class="nav_item nav_item--dropdown nav_item--current"> <button class="nav_link js-nav-popup" aria-haspopup="true" aria-expanded="false" data-target=".js-dropdown-product">Product</button> <div class="nav_dropdown js-dropdown-product"> <div class="nav_dropdown-wrapper nav_dropdown-wrapper--product"> <div class="nav_features"> <h2 class="nav_sub-heading nav_sub-heading--features">Features</h2> <ul class="nav_list"> <li class="nav_item"> <a href="https://postmarkapp.com/email-api" class="nav_link"> <span class="nav_icon nav_icon--email-api"></span> <span class="nav_title">Email API</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/smtp-service" class="nav_link"> <span class="nav_icon nav_icon--smtp"></span> <span class="nav_title">SMTP Service</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/message-streams" class="nav_link"> <span class="nav_icon nav_icon--streams"></span> <span class="nav_title">Message Streams</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/transactional-email" class="nav_link"> <span class="nav_icon nav_icon--transactional"></span> <span class="nav_title">Transactional Email</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/email-delivery" class="nav_link"> <span class="nav_icon nav_icon--delivery"></span> <span class="nav_title">Email Delivery</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/email-templates" class="nav_link"> <span class="nav_icon nav_icon--templates"></span> <span class="nav_title">Email Templates</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/inbound-email" class="nav_link"> <span class="nav_icon nav_icon--inbound"></span> <span class="nav_title">Inbound Email</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/email-analytics" class="nav_link"> <span class="nav_icon nav_icon--insight"></span> <span class="nav_title">Analytics & Retention</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/integrations" class="nav_link"> <span class="nav_icon nav_icon--integrations"></span> <span class="nav_title">Integrations</span> </a> </li> </ul> </div> <div class="nav_sub"> <h2 class="nav_sub-heading"> <span class="nav_icon nav_icon--for"></span> <span class="nav_text">Postmark For</span> </h2> <ul class="nav_list"> <li><a href="https://postmarkapp.com/for/agencies" class="nav_sub-link">Agencies</a></li> <li><a href="https://postmarkapp.com/for/enterprise" class="nav_sub-link">Enterprise</a></li> <li><a href="https://postmarkapp.com/for/startups" class="nav_sub-link">Startups</a></li> <li><a href="https://postmarkapp.com/for/bootstrapped-startups" class="nav_sub-link">Bootstrapped Startups</a></li> <li><a href="https://postmarkapp.com/for/side-projects" class="nav_sub-link">Side Projects</a></li> </ul> <h2 class="nav_sub-heading u-pad-top--xs"> <span class="nav_icon nav_icon--versus"></span> <span class="nav_text">Postmark vs.</span> </h2> <ul class="nav_list"> <li><a href="https://postmarkapp.com/compare/sendgrid-alternative" class="nav_sub-link">SendGrid</a></li> <li><a href="https://postmarkapp.com/compare/mailgun-alternative" class="nav_sub-link">Mailgun</a></li> <li><a href="https://postmarkapp.com/compare/amazon-ses-alternative" class="nav_sub-link">Amazon SES</a></li> <li><a href="https://postmarkapp.com/compare/sparkpost-alternative" class="nav_sub-link">SparkPost</a></li> <li><a href="https://postmarkapp.com/compare/mandrill-alternative" class="nav_sub-link">Mandrill</a></li> </ul> </div> </div> </div> </li> <li class="nav_item"> <a href="https://postmarkapp.com/pricing" class="nav_link">Pricing</a> </li> <li class="nav_item nav_item--dropdown"> <button class="nav_link js-nav-popup" aria-haspopup="true" aria-expanded="false" data-target=".js-dropdown-resources">Resources</button> <div class="nav_dropdown js-dropdown-resources"> <div class="nav_dropdown-wrapper"> <ul class="nav_list"> <li class="nav_item"> <a href="https://postmarkapp.com/blog" class="nav_link"> <span class="nav_icon nav_icon--blog"></span> <span class="nav_title">Blog</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/developer" class="nav_link"> <span class="nav_icon nav_icon--api-docs"></span> <span class="nav_title">API Documentation</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/manual" class="nav_link"> <span class="nav_icon nav_icon--manual"></span> <span class="nav_title">Getting Started</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/guides" class="nav_link"> <span class="nav_icon nav_icon--guides"></span> <span class="nav_title">Email Guides</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/postmark-express" class="nav_link"> <span class="nav_icon nav_icon--comic"></span> <span class="nav_title">Email Comic</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/webinars" class="nav_link"> <span class="nav_icon nav_icon--webinars"></span> <span class="nav_title">Webinars</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/videos" class="nav_link"> <span class="nav_icon nav_icon--videos"></span> <span class="nav_title">Videos</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/podcast" class="nav_link"> <span class="nav_icon nav_icon--podcast"></span> <span class="nav_title">Podcast</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/labs" class="nav_link"> <span class="nav_icon nav_icon--labs"></span> <span class="nav_title">Labs</span> </a> </li> <li class="nav_item"> <a href="https://dmarcdigests.com" target="_blank" rel="noopener" class="nav_link"> <span class="nav_icon nav_icon--dmarc"></span> <span class="nav_title">DMARC Digests</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/glossary" class="nav_link"> <span class="nav_icon nav_icon--glossary"></span> <span class="nav_title">Glossary</span> </a> </li> </ul> </div> </div> </li> <li class="nav_item nav_item--dropdown"> <button class="nav_link js-nav-popup" aria-haspopup="true" aria-expanded="false" data-target=".js-dropdown-help">Help</button> <div class="nav_dropdown js-dropdown-help"> <div class="nav_dropdown-wrapper"> <ul class="nav_list"> <li class="nav_item"> <a href="https://postmarkapp.com/support" class="nav_link"> <span class="nav_icon nav_icon--support"></span> <span class="nav_title">Support Center</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/contact" class="nav_link"> <span class="nav_icon nav_icon--contact"></span> <span class="nav_title">Contact Support</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/talk-to-sales" class="nav_link"> <span class="nav_icon nav_icon--contact-sales"></span> <span class="nav_title">Talk to Sales</span> </a> </li> <li class="nav_item"> <a href="https://status.postmarkapp.com/" target="_blank" rel="noopener noreferrer" class="nav_link"> <span class="nav_icon nav_icon--status"></span> <span class="nav_title">Status</span> </a> </li> </ul> </div> </div> </li> <li class="nav_item nav_item--btn"> <a href="https://account.postmarkapp.com/login" class="nav_btn cta-btn ">Log in</a> </li> <li class="nav_item nav_item--btn"> <a href="https://account.postmarkapp.com/sign_up" class="nav_btn cta-btn cta-btn--default js-signup" data-track="Click" data-category="Signup Button" data-label="Header">Start free trial</a> </li> </ul> </nav> <div class="nav-mobile js-nav-mobile hidden--at-l-2"> <img src="/images/logo-stamp-simple.svg" class="nav-mobile_logo" /> <nav class="nav nav--header nav--mobile" role="navigation" aria-label="Main"> <ul class="nav_list"> <li class="nav_item "> <a href="https://postmarkapp.com/why" class="nav_link">Why Postmark?</a> </li> <li class="nav_item nav_item--dropdown nav_item--current"> <button class="nav_link js-nav-popup" aria-haspopup="true" aria-expanded="false" data-target=".js-dropdown-product">Product</button> <div class="nav_dropdown js-dropdown-product"> <div class="nav_dropdown-wrapper nav_dropdown-wrapper--product"> <div class="nav_features"> <h2 class="nav_sub-heading nav_sub-heading--features">Features</h2> <ul class="nav_list"> <li class="nav_item"> <a href="https://postmarkapp.com/email-api" class="nav_link"> <span class="nav_icon nav_icon--email-api"></span> <span class="nav_title">Email API</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/smtp-service" class="nav_link"> <span class="nav_icon nav_icon--smtp"></span> <span class="nav_title">SMTP Service</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/message-streams" class="nav_link"> <span class="nav_icon nav_icon--streams"></span> <span class="nav_title">Message Streams</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/transactional-email" class="nav_link"> <span class="nav_icon nav_icon--transactional"></span> <span class="nav_title">Transactional Email</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/email-delivery" class="nav_link"> <span class="nav_icon nav_icon--delivery"></span> <span class="nav_title">Email Delivery</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/email-templates" class="nav_link"> <span class="nav_icon nav_icon--templates"></span> <span class="nav_title">Email Templates</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/inbound-email" class="nav_link"> <span class="nav_icon nav_icon--inbound"></span> <span class="nav_title">Inbound Email</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/email-analytics" class="nav_link"> <span class="nav_icon nav_icon--insight"></span> <span class="nav_title">Analytics & Retention</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/integrations" class="nav_link"> <span class="nav_icon nav_icon--integrations"></span> <span class="nav_title">Integrations</span> </a> </li> </ul> </div> <div class="nav_sub"> <h2 class="nav_sub-heading"> <span class="nav_icon nav_icon--for"></span> <span class="nav_text">Postmark For</span> </h2> <ul class="nav_list"> <li><a href="https://postmarkapp.com/for/agencies" class="nav_sub-link">Agencies</a></li> <li><a href="https://postmarkapp.com/for/enterprise" class="nav_sub-link">Enterprise</a></li> <li><a href="https://postmarkapp.com/for/startups" class="nav_sub-link">Startups</a></li> <li><a href="https://postmarkapp.com/for/bootstrapped-startups" class="nav_sub-link">Bootstrapped Startups</a></li> <li><a href="https://postmarkapp.com/for/side-projects" class="nav_sub-link">Side Projects</a></li> </ul> <h2 class="nav_sub-heading u-pad-top--xs"> <span class="nav_icon nav_icon--versus"></span> <span class="nav_text">Postmark vs.</span> </h2> <ul class="nav_list"> <li><a href="https://postmarkapp.com/compare/sendgrid-alternative" class="nav_sub-link">SendGrid</a></li> <li><a href="https://postmarkapp.com/compare/mailgun-alternative" class="nav_sub-link">Mailgun</a></li> <li><a href="https://postmarkapp.com/compare/amazon-ses-alternative" class="nav_sub-link">Amazon SES</a></li> <li><a href="https://postmarkapp.com/compare/sparkpost-alternative" class="nav_sub-link">SparkPost</a></li> <li><a href="https://postmarkapp.com/compare/mandrill-alternative" class="nav_sub-link">Mandrill</a></li> </ul> </div> </div> </div> </li> <li class="nav_item"> <a href="https://postmarkapp.com/pricing" class="nav_link">Pricing</a> </li> <li class="nav_item nav_item--dropdown"> <button class="nav_link js-nav-popup" aria-haspopup="true" aria-expanded="false" data-target=".js-dropdown-resources">Resources</button> <div class="nav_dropdown js-dropdown-resources"> <div class="nav_dropdown-wrapper"> <ul class="nav_list"> <li class="nav_item"> <a href="https://postmarkapp.com/blog" class="nav_link"> <span class="nav_icon nav_icon--blog"></span> <span class="nav_title">Blog</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/developer" class="nav_link"> <span class="nav_icon nav_icon--api-docs"></span> <span class="nav_title">API Documentation</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/manual" class="nav_link"> <span class="nav_icon nav_icon--manual"></span> <span class="nav_title">Getting Started</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/guides" class="nav_link"> <span class="nav_icon nav_icon--guides"></span> <span class="nav_title">Email Guides</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/postmark-express" class="nav_link"> <span class="nav_icon nav_icon--comic"></span> <span class="nav_title">Email Comic</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/webinars" class="nav_link"> <span class="nav_icon nav_icon--webinars"></span> <span class="nav_title">Webinars</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/videos" class="nav_link"> <span class="nav_icon nav_icon--videos"></span> <span class="nav_title">Videos</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/podcast" class="nav_link"> <span class="nav_icon nav_icon--podcast"></span> <span class="nav_title">Podcast</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/labs" class="nav_link"> <span class="nav_icon nav_icon--labs"></span> <span class="nav_title">Labs</span> </a> </li> <li class="nav_item"> <a href="https://dmarcdigests.com" target="_blank" rel="noopener" class="nav_link"> <span class="nav_icon nav_icon--dmarc"></span> <span class="nav_title">DMARC Digests</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/glossary" class="nav_link"> <span class="nav_icon nav_icon--glossary"></span> <span class="nav_title">Glossary</span> </a> </li> </ul> </div> </div> </li> <li class="nav_item nav_item--dropdown"> <button class="nav_link js-nav-popup" aria-haspopup="true" aria-expanded="false" data-target=".js-dropdown-help">Help</button> <div class="nav_dropdown js-dropdown-help"> <div class="nav_dropdown-wrapper"> <ul class="nav_list"> <li class="nav_item"> <a href="https://postmarkapp.com/support" class="nav_link"> <span class="nav_icon nav_icon--support"></span> <span class="nav_title">Support Center</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/contact" class="nav_link"> <span class="nav_icon nav_icon--contact"></span> <span class="nav_title">Contact Support</span> </a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/talk-to-sales" class="nav_link"> <span class="nav_icon nav_icon--contact-sales"></span> <span class="nav_title">Talk to Sales</span> </a> </li> <li class="nav_item"> <a href="https://status.postmarkapp.com/" target="_blank" rel="noopener noreferrer" class="nav_link"> <span class="nav_icon nav_icon--status"></span> <span class="nav_title">Status</span> </a> </li> </ul> </div> </div> </li> <li class="nav_item nav_item--btn"> <a href="https://account.postmarkapp.com/login" class="nav_btn cta-btn ">Log in</a> </li> <li class="nav_item nav_item--btn"> <a href="https://account.postmarkapp.com/sign_up" class="nav_btn cta-btn cta-btn--default js-signup" data-track="Click" data-category="Signup Button" data-label="Header">Start free trial</a> </li> </ul> </nav> <div class="nav-mobile_extras"> <a href="https://account.postmarkapp.com/sign_up" class="cta-btn cta-btn--default cta-btn--medium js-signup" data-track="Click" data-category="Signup Button" data-label="Header (Mobile)">Start free trial</a> <p class="nav-mobile_login">Already have an account? <a href="https://account.postmarkapp.com/login">Log in →</a></p> </div> </div> </div> </header> <div class="page u-clearfix"> <header class="hero hero--header"> <div class="u-container"> <div class="hero_icon"> <img src="/images/templates.svg" alt="Email templates" style="max-width:120px;"> </div> <h1 class="hero_title title-hero">Responsive, highly compatible, and nicely integrated templates.</h1> <p class="hero_desc hero_desc--half">Building, testing, and managing email templates is tedious and time-consuming. So let us handle it.</p> </div> </header> <div class="u-container"> <article class="reason"> <div class="reason_body"> <section class="reason_section-text"> <div class="reason_section-text-content"> <h2>What if you didn’t have to spend hours or days testing emails?</h2> <p>Postmark includes pre-built templates and layouts for common types of <a href="/transactional-email">transactional emails</a> like welcome emails, password resets, receipts and invoices, trial expirations, user invitations, and comment notifications. With our editor and tools, you have complete control over customizing each template to fit your exact needs.</p> </div> </section> <div class="reason_visual"> <figure class="reason_figure"> <img src="/images/reasons/templates-choose.png" alt="Screenshot of the templates page" class="reason_img reason_img--border"> </figure> <aside class="reason_aside"> <div class="reason_sidenote" style="top: 329px;"> <p>Don’t need our templates? Start from scratch and code your own.</p> <div class="reason_callout-line" style="width: 538px;"></div> </div> <div class="reason_sidenote" style="top: 458px;"> <p>Learn all about the best practices of each email template.</p> <div class="reason_callout-line" style="width: 239px;"></div> </div> </aside> </div> <section class="reason_section-text"> <div class="reason_section-text-content"> <h2>HTML, plain text, variables, iterators. Edit your templates with ease.</h2> <p>You can edit your templates right in Postmark, send yourself a test email, and switch between HTML and text versions. These are powered by <a href="https://github.com/activecampaign/mustachio" target="_blank" rel="noopener">Mustachio</a>, our lightweight, powerful, flavorful, templating engine so you can create dynamic templates with minimal effort. Just add styles in the head of your email, and Postmark will automatically inline all of your CSS for maximum email client compatibility.</p> </div> </section> <div class="reason_visual"> <figure class="reason_figure"> <img src="/images/reasons/TemplateEdit.png" class="reason_img reason_img--border" alt="Postmark template editor"> </figure> <aside class="reason_aside"> <div class="reason_sidenote" style="top: 129px;"> <p>Edit your template’s code and preview it directly in Postmark.</p> <div class="reason_callout-line" style="width: 612px;"></div> </div> <div class="reason_sidenote" style="top: 120px;"> <p>Complete control over your template’s HTML and text versions.</p> <div class="reason_callout-line" style="width: 626px;"></div> </div> </aside> </div> <section class="reason_section-text"> <div class="reason_section-text-content"> <h2>Easily edit and manage multiple templates.</h2> <p>With Postmark Layouts you can reuse common elements like CSS, Headers, and Footers across all of your email templates. So making changes across multiple templates is a breeze.</p> <p>And if you like testing things out in a staging environment before making your templates live, you can easily push template changes between environments.</p> </div> <div class="reason_visual"> <figure class="reason_figure"> <img src="/images/reasons/templates-push.png" class="reason_img reason_img--border" alt="Postmark push templates page"> </figure> <aside class="reason_aside"> <div class="reason_sidenote" style="top: 355px;"> <p>Know whether your template or layout was newly added or modified.</p> <div class="reason_callout-line" style="width: 604px;"></div> </div> <div class="reason_sidenote" style="top: 402px;"> <p>Easily see the differences by previewing both versions side-by-side.</p> <div class="reason_callout-line" style="width: 198px;"></div> </div> </aside> </section> <section class="reason_section-text"> <div class="reason_section-text-content"> <h2>Preview changes right in your browser.</h2> <p>Just need to make a small change and want to do a quick spot check to make sure the email still looks right? Switchover to preview mode and look at that email sparkle. You can even update your test variables right in the browser and see the preview updated in real-time.</p> </div> </section> <div class="reason_visual"> <figure class="reason_figure"> <img src="/images/reasons/TemplatePreview.gif" class="reason_img reason_img--border" alt="Postmark Template Preview"> </figure> <aside class="reason_aside"> <div class="reason_sidenote" style="top: 31px;"> <p>Send a test email to see how your template looks in different email clients.</p> <div class="reason_callout-line" style="width: 92px;"></div> </div> <div class="reason_sidenote" style="top: 68px;"> <p>Update sample values for template variables to see how they look in your template.</p> <div class="reason_callout-line" style="width: 228px;"></div> </div> <div class="reason_sidenote" style="top: 292px;"> <p>Resize your preview to see how your template looks on desktop and mobile.</p> <div class="reason_callout-line" style="width: 436px;"></div> </div> </aside> </div> <div class="reason_section-text"> <div class="reason_section-text-content"> <p>Once your template is ready, we provide ready to use API snippets to make integration a breeze. We include pre-populated snippets with the exact code you need to use the template in your language of choice. </p> </div> </div> <div class="reason_visual"> <figure class="reason_figure"> <img src="/images/reasons/TemplateSnippets.gif" class="reason_img reason_img--border" alt="Postmark template editor"> </figure> <aside class="reason_aside"> <div class="reason_sidenote"> <p>Integrate your template in seconds with pre-populated code snippets in curl, Ruby, C#, PHP, and Node.js.</p> </div> </aside> </div> <section class="reason_section-text"> <div class="reason_section-text-content"> <h2>Need more control? Try <a href="/mailmason" target="_blank" rel="noopener">MailMason</a>.</h2> <p>We needed some tools to help us create, test, and manage the templates available in Postmark. So we built them. And then we made them open source. MailMason gives you all the power of partials, variables, SASS, and asset management in one neat little package. You can use our templates to kickstart your process or you can start from scratch. Either way, managing and testing your email templates just became a whole lot easier. And faster. And, dare we say it, fun?</p> <div class="u-grid u-grid--center"> <img src="/images/reasons/badge-mailmason.png" srcset="/images/reasons/badge-mailmason@2x.png 2x" alt="MailMason – A powerful email templating workflow built by Postmark"> <div class="u-grid-cell--push-left"> <h4 class="u-title-compact">Get started with MailMason</h4> <a class="cta-btn cta-btn--default u-margin-right--xs" href="https://github.com/activecampaign/mailmason" target="_blank" rel="noopener">View on GitHub</a> <a class="cta-btn" href="https://github.com/activecampaign/mailmason/archive/master.zip">Download</a> </div> </div> </div> </section> </div> </article> </div> <hr class="divider divider--grey-light u-margin-top--xl"> <div class="u-container"> <nav class="reasons-nav "> <h2 class="reasons-nav_title">Explore our features</h2> <ul class="reasons-nav_list"> <li class="reasons-nav_item"> <a href="https://postmarkapp.com/email-api" class="reasons-nav_link"> <span class="nav_icon nav_icon--email-api"></span> <span>Email API</span> </a> </li> <li class="reasons-nav_item"> <a href="https://postmarkapp.com/smtp-service" class="reasons-nav_link"> <span class="nav_icon nav_icon--smtp"></span> <span>SMTP Service</span> </a> </li> <li class="reasons-nav_item"> <a href="https://postmarkapp.com/message-streams" class="reasons-nav_link"> <span class="nav_icon nav_icon--streams"></span> <span>Message Streams</span> </a> </li> <li class="reasons-nav_item"> <a href="https://postmarkapp.com/transactional-email" class="reasons-nav_link"> <span class="nav_icon nav_icon--transactional"></span> <span>Transactional Email</span> </a> </li> <li class="reasons-nav_item"> <a href="https://postmarkapp.com/email-delivery" class="reasons-nav_link"> <span class="nav_icon nav_icon--delivery"></span> <span>Email Delivery</span> </a> </li> <li class="reasons-nav_item reasons-nav_item--current"> <a href="https://postmarkapp.com/email-templates" class="reasons-nav_link"> <span class="nav_icon nav_icon--templates"></span> <span>Email Templates</span> </a> </li> <li class="reasons-nav_item"> <a href="https://postmarkapp.com/inbound-email" class="reasons-nav_link"> <span class="nav_icon nav_icon--inbound"></span> <span>Inbound Email</span> </a> </li> <li class="reasons-nav_item"> <a href="https://postmarkapp.com/email-analytics" class="reasons-nav_link"> <span class="nav_icon nav_icon--insight"></span> <span>Analytics</span> </a> </li> <li class="reasons-nav_item"> <a href="https://postmarkapp.com/email-webhooks" class="reasons-nav_link"> <span class="nav_icon nav_icon--webhooks"></span> <span>Webhooks</span> </a> </li> <li class="reasons-nav_item"> <a href="https://postmarkapp.com/security" class="reasons-nav_link"> <span class="nav_icon nav_icon--security"></span> <span>Security</span> </a> </li> <li class="reasons-nav_item"> <a href="https://postmarkapp.com/email-experts" class="reasons-nav_link"> <span class="nav_icon nav_icon--support"></span> <span>Email Experts</span> </a> </li> <li class="reasons-nav_item"> <a href="https://postmarkapp.com/rebound" class="reasons-nav_link"> <span class="nav_icon nav_icon--rebound"></span> <span>Rebound</span> </a> </li> </ul> </nav> </div> <section class="connect"> <div class="u-container u-grid u-grid--full u-grid--1of2-at-medium"> <section class="connect_section connect_section--subscribe u-grid-cell"> <h2 class="connect_title">Email best practices and industry news. Delivered monthly.</h2> <form action="https://postmark.activehosted.com/proc.php" method="post" class="connect_form" target="_blank"> <input type="hidden" name="u" value="5" /> <input type="hidden" name="f" value="5" /> <input type="hidden" name="s" /> <input type="hidden" name="c" value="0" /> <input type="hidden" name="m" value="0" /> <input type="hidden" name="act" value="sub" /> <input type="hidden" name="v" value="2" /> <input type="hidden" name="or" value="02a4b22a83b531c4bcc27f3da018b56c" /> <fieldset class="connect_fieldset"> <p class="connect_text">Our monthly newsletter is packed full of email tips, product announcements, and interviews with industry experts.</p> <div class="form-row connect_form-row"> <label class="connect_label hidden">Email address</label> <input class="connect_input qa-input-email" type="email" placeholder="Your email address" name="email" required> <input class="connect_submit cta-btn " type="submit" value="Subscribe"> </div> </fieldset> </form> <div class="connect_social"> <ul class="u-inline-list social-refs"> <li class="social-refs_item"><a href="https://twitter.com/postmarkapp" class="social-refs_link social-refs_link--twitter">Follow @postmarkapp</a></li> </ul> </div> </section> <section class="connect_section connect_section--chat u-grid-cell"> <h2 class="connect_title">Still have questions?</h2> <div class="connect_chat-box"> <ul class="team-list connect_support-team team-list--narrow"> <li class="team-list_item"> <img src="https://craft-assets.postmarkapp.com/userphotos/anna/_44x44_crop_center-center_none/anna_crop.jpg" srcset="https://craft-assets.postmarkapp.com/userphotos/anna/_88x88_crop_center-center_none/anna_crop.jpg 2x" alt="Anna Ward" title="Anna Ward" class="team-list_photo" /> <span class="team-list_name">Anna</span> </li> <li class="team-list_item"> <img src="https://craft-assets.postmarkapp.com/userphotos/Iroig/_44x44_crop_center-center_none/T02JENB1D-U06SB2VCMHR-6f6fbf0d2aab-512.jpeg" srcset="https://craft-assets.postmarkapp.com/userphotos/Iroig/_88x88_crop_center-center_none/T02JENB1D-U06SB2VCMHR-6f6fbf0d2aab-512.jpeg 2x" alt="Ignacio Roig" title="Ignacio Roig" class="team-list_photo" /> <span class="team-list_name">Ignacio</span> </li> </ul> <div class="connect_callout-box"> <p class="connect_chat-callout">Ask us anything! We’re eager to help you with any problem or question you have…</p> <a href="https://postmarkapp.com/contact" class="cta-btn">Contact us</a> </div> </div> </section> </div> </section> </div> <footer class="footer "> <div class="u-container footer_container"> <nav class="nav nav--footer " role="navigation" aria-label="Footer"> <div class="nav_group"> <h4 class="nav_heading">Product</h4> <ul class="nav_list"> <li class="nav_item"> <a href="https://postmarkapp.com/pricing" class="nav_link">Pricing</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/customers" class="nav_link">Customers</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/reviews" class="nav_link">Reviews</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/dedicated-ips" class="nav_link">Dedicated IPs</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/ios" class="nav_link">iOS App</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/lp/referral-partner-program" class="nav_link">Referral Partner Program</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/updates" class="nav_link nav_link--updates" data-latest-update="1731514860">Latest Updates</a> </li> </ul> </div> <div class="nav_group"> <h4 class="nav_heading">Features</h4> <ul class="nav_list"> <li class="nav_item"> <a href="https://postmarkapp.com/email-api" class="nav_link">Email API</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/smtp-service" class="nav_link">SMTP Service</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/message-streams" class="nav_link">Message Streams</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/transactional-email" class="nav_link">Transactional Email</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/email-delivery" class="nav_link">Email Delivery</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/email-templates" class="nav_link">Templates</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/inbound-email" class="nav_link">Inbound Email</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/email-analytics" class="nav_link">Analytics & Retention</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/integrations" class="nav_link">Integrations</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/email-webhooks" class="nav_link">Webhooks</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/security" class="nav_link">Security</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/email-experts" class="nav_link">Email Experts</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/rebound" class="nav_link">Rebound</a> </li> </ul> </div> <div class="nav_group"> <h4 class="nav_heading">Postmark For</h4> <ul class="nav_list"> <li class="nav_item"> <a href="https://postmarkapp.com/for/agencies" class="nav_link">Agencies</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/for/startups" class="nav_link">Startups</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/for/enterprise" class="nav_link">Enterprise</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/for/bootstrapped-startups" class="nav_link">Bootstrapped Startups</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/for/side-projects" class="nav_link">Side Projects</a> </li> <li class="nav_item"> <a href="/send-email" class="nav_link">Developers</a> </li> </ul> <h4 class="nav_heading">Postmark vs.</h4> <ul class="nav_list"> <li class="nav_item"> <a href="https://postmarkapp.com/compare/sendgrid-alternative" title="Compare Postmark to SendGrid" class="nav_link">SendGrid</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/compare/sparkpost-alternative" title="Compare Postmark to SparkPost" class="nav_link">SparkPost</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/compare/mailgun-alternative" title="Compare Postmark to Mailgun" class="nav_link">Mailgun</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/compare/amazon-ses-alternative" title="Compare Postmark to Amazon SES" class="nav_link">Amazon SES</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/compare/mandrill-alternative" title="Compare Postmark to Mandrill" class="nav_link">Mandrill</a> </li> </ul> </div> <div class="nav_group"> <h4 class="nav_heading">Resources</h4> <ul class="nav_list"> <li class="nav_item"> <a href="https://postmarkapp.com/blog" class="nav_link">Blog</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/developer" class="nav_link">API Documentation</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/manual" class="nav_link">Getting Started</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/guides" class="nav_link">Email Guides</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/postmark-express" class="nav_link">Email Comic</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/videos" class="nav_link">Videos</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/podcast" class="nav_link">Podcast</a> </li> <li class="nav_item"> <a href="https://dmarcdigests.com" target="_blank" rel="noopener" class="nav_link">DMARC Digests</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/webinars" class="nav_link">Webinars</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/labs" class="nav_link">Labs</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/migration-guides" class="nav_link">Migration Guides</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/newsletter" class="nav_link">Newsletter</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/glossary" class="nav_link">Glossary</a> </li> </ul> </div> <div class="nav_group"> <h4 class="nav_heading">Help</h4> <ul class="nav_list"> <li class="nav_item"> <a href="https://postmarkapp.com/support" class="nav_link">Support Center</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/contact" class="nav_link">Contact Support</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/talk-to-sales" class="nav_link">Talk to Sales</a> </li> <li class="nav_item"> <a href="https://status.postmarkapp.com" target="_blank" rel="noopener noreferrer" class="nav_link">Service Status</a> </li> </ul> <h4 class="nav_heading">Visit ActiveCampaign for:</h4> <ul class="nav_list"> <li class="nav_item"> <a href="https://www.activecampaign.com/marketing-automation?utm_source=postmark&utm_medium=referral&utm_campaign=postmark_web&utm_content=postmark_footer_nav" target="_blank" rel="noopener" class="nav_link">Marketing Automation</a> </li> <li class="nav_item"> <a href="https://www.activecampaign.com/sales-crm?utm_source=postmark&utm_medium=referral&utm_campaign=postmark_web&utm_content=postmark_footer_nav" target="_blank" rel="noopener" class="nav_link">CRM & Sales Automation</a> </li> <li class="nav_item"> <a href="https://www.activecampaign.com/omnichannel/landing-pages?utm_source=postmark&utm_medium=referral&utm_campaign=postmark_web&utm_content=postmark_footer_nav" target="_blank" rel="noopener" class="nav_link">Landing Pages</a> </li> <li class="nav_item"> <a href="https://www.activecampaign.com/omnichannel/sms-marketing?utm_source=postmark&utm_medium=referral&utm_campaign=postmark_web&utm_content=postmark_footer_nav" target="_blank" rel="noopener" class="nav_link">SMS Automation</a> </li> </ul> </div> </nav> <div class="u-grid u-grid--full u-grid--1of3-at-large footer_lower"> <div class="u-grid-cell"> <div class="footer_ac"> Made with <span class="footer_love">♥</span> at <a href="https://www.activecampaign.com?utm_source=postmark&utm_medium=referral&utm_campaign=postmark_web&utm_content=postmark_footer" class="footer_ac-logo" target="_blank" rel="noopener">ActiveCampaign</a></a> </div> </div> <div class="u-grid-cell u-grid-cell--2of3"> <div class="nav nav--legal"> <ul class="nav_list nav_list--legal"> <li class="nav_item"> <a href="https://postmarkapp.com/privacy-policy" class="nav_link">Privacy Policy</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/cookie-policy" class="nav_link">Cookie Policy</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/terms-of-service" class="nav_link">Terms of Service</a> </li> <li class="nav_item"> <a href="https://postmarkapp.com/eu-privacy" class="nav_link">EU Data Protection</a> </li> <li class="nav_item">© ActiveCampaign, <abbr>LLC</abbr>, 2024.</li> </ul> </div> </div> </div> </div> </footer> <button class="fake-hs-beacon hidden js-load-beacon"> <span class="fake-hs-beacon_icon"></span> <span class="fake-hs-beacon_text">Help</span> </button> <script src="https://postmarkapp.com/dist/js/landing.62373c57e4385a5bc6b5.js"></script> <script type="text/javascript"> window['GoogleAnalyticsObject'] = 'ga'; window['ga'] = window['ga'] || function() { (window['ga'].q = window['ga'].q || []).push(arguments) }; </script>  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PWV3TKM" width="0" height="0" style="display:none; visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-PWV3TKM');</script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "url": "https://postmarkapp.com", "logo": "https://postmarkapp.com/images/logo-stamp-social.png", "name": "Postmark", "founder": [ { "@type": "Person", "name": "Jason VandeBoom", "jobTitle": "CEO" } ], "foundingLocation": { "@type": "Place", "address": { "@type": "PostalAddress", "streetAddress": "1 North Dearborn St, 5th Floor", "addressLocality": "Chicago", "addressRegion": "IL", "postalCode": "60602", "addressCountry": "US" } }, "location": { "@type": "Place", "address": { "@type": "PostalAddress", "streetAddress": "1 North Dearborn St, 5th Floor", "addressLocality": "Chicago", "addressRegion": "IL", "postalCode": "60602", "addressCountry": "US" } }, "sameAs": [ "https://twitter.com/postmarkapp" ] } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "Postmark", "url": "https://postmarkapp.com" } </script> </body> </html>

CINXE.COM

Responsive Transactional Email Templates | Postmark