Designing HTML email templates for transactional emails

February 24, 2026

Styling HTML transactional email templates is painful. Tables, inline CSS, unsupported CSS, desktop clients, web clients, mobile clients, and various device sizes are all things that influence your email template. Should any inbox service provider (ISP, that’s Gmail) or email service provider (ESP, that’s Sinch Mailgun) struggle to receive or send your emails, your campaigns will fail to generate engagement.

It’s no surprise that developers don’t want to deal with transactional email templates when there’s a backlog of more important priorities.

First things first: transactional emails are automated messages sent to recipients in response to a specific action. When someone does something on your website, like requesting a password reset or purchasing a product, they’ll receive a transactional email.

These emails differ from promotional emails or marketing emails in two ways. The first is about content. Transactional emails contain factual, straightforward information and usually don’t further a marketing goal or pitch an upsell. Secondly, as opposed to marketing messages, which require someone to subscribe or opt in to receive them, transactional emails don’t need permission from the recipient.

Transactional emails are sent immediately after the user takes an action and provide information related to that action. Let’s take a look at some examples of transactional emails, for clarity’s sake:

• Order confirmation email: If someone makes an eCommerce purchase, they might receive an email confirming their purchase that also provides details like an order number, payment method used, and estimated delivery date.
• Notification email: Another example might alert the recipient that something about their order, transaction, service request, or something else, has changed recently.
• Shipping confirmation email: This might be triggered when a customer’s order has been picked up by the shipping carrier.
• Abandoned cart email: This type of email would be sent when a customer adds something to their cart but doesn’t complete the purchase. It might contain an incentive such as a discount code to encourage them to proceed.
• Password reset email: If someone forgets their password and requests a password reset, they might receive an email with a link to reset their password.

There are more examples, of course, but this generally describes what we’re talking about here. Transactional emails are an important part of any organization’s customer service strategy. Not only do they provide people with important information about the product or service they purchased – as well as system messages and alerts – they also help to build trust and provide reassurance about actions taken.

The basic structure of any transactional email template should include:

• Sender name and address
• The recipient’s name and address
• A clear subject line
• A spot for primary information about why the recipient is receiving this email
• Links to relevant tools or web pages related to the transaction (a cancel page, customer service, support, etc.).
• Contact info

So, a transactional email template is a pre-built layout that email developers can use to streamline the creation of customized transactional emails for their company or client.

By using a transactional email template, you can ensure that your messages check all the required boxes and share the same look and feel. This is important for customer trust. Transactional email templates also make it easier to focus on customizations without wasting time developing foundational elements.

Email design for transactional messages should be designed with care to ensure they’re effective. Here are some best practices for designing templates for your automated emails:

Transactional emails need to get straight to the point. It’s not the time to take risks, try new things, or attempt to “wow” subscribers. Make sure you build your transactional emails to a standard size and don’t go beyond 800 pixels wide. If you use Mailgun’s transactional email templates, you shouldn’t have any issues with this one.

With the increasing use of mobile devices to access email, it’s crucial to ensure your transactional email templates are optimized for different screen sizes. This allows recipients to easily read and interact with the message. Again, this isn’t the time to cross your fingers and hope for the best. Make sure to utilize an email testing tool to see how your email appears in various situations.

Transactional emails serve a specific purpose and are not the place to promote your brand or products. Stick to the purpose of the email and maybe a simple CTA, and avoid adding additional marketing messages that could distract the recipient from the primary message.

To ensure your transactional emails are accessible to everyone, it’s important to have fallbacks for all GIFs, specialty fonts, and other design elements that may not display correctly in all email clients. This will ensure that all recipients can view the content of your email, regardless of the email client they’re using. An image validation tool for email makes it simple to ensure you’ve covered this best practice.

When designing transactional email templates, it’s essential to consider accessibility, especially with EAA around the corner. Make sure your email is easy to read and navigate for people with impairments, including those who use screen readers or other assistive technologies. Use alt text for images and make sure your color choices provide enough contrast for people with visual impairments. Test for email accessibility and make corrections until it’s perfect for everyone.

Accessibility isn’t always top of mind, but it is important. We’ve just released Mailgun Inspect to help. Using templates with inspect will make sure your messages land in the inbox and are accessible to all your subscribers.

• Make content more inclusive with semantic HTML checks.
• Flag missing alt text, poor contrast, or structural issues.
• Reach every subscriber, regardless of ability or device.

Personalized transactional emails can be more effective in engaging your audience. Consider including fields for personalization, such as the recipient’s name or order details. This will help to create a more personal connection between the recipient and your brand. It can also help assure recipients that they’re viewing accurate information.

You’ve probably picked up on a theme from all of these best practices – test, test, test. It’s not enough to assume your email is good to go. Sending it to your colleague across the hall isn’t proper due diligence, either. Use an email testing tool to check for display issues, typos, accessibility, and even deliverability (transactional emails should never go to spam).

Make sure your “From” name is clearly associated with your brand. Avoid generic sender names or “no-reply” addresses whenever possible, as they can reduce trust and discourage engagement. Instead, use a recognizable brand name (e.g., “Acme Support” or “Acme Billing”) and a monitored inbox so recipients can reply if needed.

Transactional emails should be easy to understand at a glance. Use clear, straightforward language and avoid industry jargon, technical terminology, or internal acronyms. Recipients should immediately understand why they’re receiving the email and what action (if any) they need to take.

If your email requires action, include one clear and prominent call to action (CTA). Multiple competing buttons or links can create confusion and reduce conversions. Make the primary CTA visually distinct and action-oriented (e.g., “View receipt,” “Reset password,” or “Manage subscription”).

A clean, single-column layout improves readability and performs better on mobile devices. Ensure there’s enough white space between sections, buttons, and text blocks to prevent clutter. Adequate spacing makes it easier for recipients to scan and act quickly.

Even though transactional emails are functional, they should still reflect your brand. Use consistent voice and tone, display your logo prominently, and stick to your established color palette and fonts. Consistent branding builds trust and reassures recipients that the email is legitimate.

If you include any secondary messaging, keep it subtle and clearly separate from the primary transactional content. Avoid heavy promotional banners or competing offers that could distract from the purpose of the email.

The preheader text (the short preview text that appears next to or below the subject line in the inbox) should support and reinforce the subject line. Use it to provide additional clarity, such as key details (order number, renewal date, etc.) that encourage the recipient to open the email.

Always include clear and prominent support information. This could be a help center link, customer support email address, phone number, or phone number. Transactional emails often relate to important account activity, so recipients should know exactly where to go if they have questions or concerns.

To guard your deliverability and protect subscribers from spoofers, implement proper email authentication protocols:

• Sender Policy Framework (SPF)
• DomainKeys Identified Mail (DKIM)
• Domain-based Message Authentication, Reporting, and Conformance (DMARC)

These protocols help inbox providers verify that your transactional emails are legitimate and improve inbox placement.

Many email clients now support dark mode. When designing transactional email templates:

• Avoid hard-coded background colors.
  Use transparent logo files.
• Test contrast ratios.
• Validate how buttons and images render in dark environments.

Even transactional emails can benefit from testing. Consider testing subject lines, CTA language, and layout spacing to improve clarity and completion rates.

For transactional email templates, monitor:

• Completion rates.
• Bounce rates.
• Spam complaint rates.
• Failed delivery rates.
• Domain reputation health.

Modern email platforms allow you to automate transactional email templates through APIs, webhooks, and CRM integrations. This ensures accurate personalization fields and real-time triggering.

Many teams look at real examples before building their own transactional email templates. Reviewing effective designs can help you evaluate layout, hierarchy, CTA placement, branding, and clarity.

Mailgun’s downloadable templates provide production-ready HTML that you can customize and deploy immediately. Rather than offering only design previews, these templates are built for responsiveness, accessibility, and deliverability so you can integrate them directly into your workflows.

Sinch Mailgun offers several customizable transactional email templates to help you get started quickly.

These templates are built for common use cases like:

• Billing notifications
• Order confirmations
• Password resets
• Account alerts

Each template is lightweight and easy to customize, making it simple to add your branding and tailor content to your needs. Personalization fields are built in so you can quickly set up triggered messages while keeping recipients informed.

Here are a few standout features you should be aware of:

Before sending HTML emails, you should inline your CSS. We recommend using something like Premailer to accomplish this. There are libraries that do this for each of the popular languages (Ruby, Node, PHP, Python, Grunt), or you can manually inline your CSS using Premailer. Our responsive email templates include media queries for responsive design. It’s important that media queries are not inlined (Premailer handles this for you). 

Our repo contains both the original templates with a separate CSS stylesheet, as well as templates with CSS already inlined – see the /inlined folder.

These email templates are responsive for mobile devices and use media queries to optimize the design for smaller screens.

According to Mailjet’s email engagement report, 52.5% of respondents use the Gmail mobile app to check their emails. So it’s important that your emails look good and are usable on small screens. 

Be aware that, as of this writing, only a handful of major email clients support media queries. This includes iOS Mail, Android 4.X, and Windows Phone 7.5 native email apps. 

We recently added dark mode functionality to these templates in line with the industry ’s growing trend to protect users’ eyes, conserve battery life, and improve design for contrast.

Just because we’re nice, we’ve removed some of the pain by open-sourcing and improving a collection of common HTML email templates for transactional messages. You can either download the templates as a zip file or view them on GitHub.

These email examples are free and open source, so feel free to use them as you wish. If you do use them, we’d love to know about it –  send us a link to your product or service on Twitter or discuss on Hacker News.

These templates aren’t for email marketing, since the content can vary widely depending on what you’re sending. For example, an email newsletter can change with each new addition, while marketing emails need to be designed based on individual campaign goals and subscriber segments. So keep in mind that these templates are best suited for transactional emails only – not your next marketing campaign. 

Our library includes:

• Action emails e.g. account activation, password resets, welcome emails  
• Email alerts e.g. limit alert, problem alert  
• Billing emails e.g. monthly receipts, invoices, order confirmations    

These responsive HTML email templates now work in dark mode and have been tested across all popular email clients. The HTML code for these templates is available to copy or download through GitHub.

Transactional HTML email templates are essential for enhancing customer experience and streamlining business operations through automation. Among the most popular types are invoice email templates, which provide pricing details to help ensure customers understand their charges and account activity. These templates often integrate seamlessly with various CRM and billing systems, allowing for real-time updates and personalized communication. Automated invoice emails not only save time but also reduce the risk of human error, contributing to a more efficient workflow.

Order confirmation templates are another vital type, offering customers instant assurance that their purchase has been processed. Shipping notification templates keep customers informed about the status of their deliveries, adding a layer of transparency that enhances trust and satisfaction. Password reset email templates ensure a smooth and secure process for customers to regain access to their accounts, crucial for maintaining a positive user experience. Each of these templates can be customized to reflect the brand’s identity, fostering a consistent and professional impression that significantly improves the overall customer experience.

This brings us to a great point, transactional emails are the unsung heroes of customer experience and optimizing and personalizing them with html not only makes them more manageable and accessible, but more impactful in terms of building brand trust and community with your customers.

Other popular types of transactional email templates include:

• Payment confirmation / receipt / invoice email: If someone completes a purchase or payment, they might receive an email confirming the transaction that also includes important details like the payment amount, invoice number, billing date, payment method used, and a breakdown of charges for their records.
• Cancellation confirmation email: If a customer cancels an order, appointment, reservation, or subscription, they might receive an email confirming the cancellation that outlines what was canceled, the effective date, any refund details, and next steps if they wish to reactivate or make changes.
• Subscription renewal / expiration notification email: If someone has an active subscription, they might receive an email reminding them of an upcoming renewal or alerting them that their subscription is about to expire. This message may include the renewal date, cost, billing information, and instructions for managing or canceling their subscription.

Security alert email: If suspicious or unusual activity is detected on a user’s account, they might receive an email notifying them of the activity. This could include details about a new login, password change, or payment attempt, along with guidance on securing their account if the action was unauthorized.

Whether you build your templates from scratch, or take advantage of our library, keep in mind that short, streamlined templates work best for transactional messages. Creating and managing multiple templates for your needs is easy with a strong API and an easy email editor.

We’re all about giving you useful information, tools, and templates, but we also provide great service for your emails and for the humans that send them. Check out our transactional email services to learn more about what we do.