How to Write a Plan Expiry Alert Email with an HTML Template

By Faraz - August 13, 2024

Learn how to write a plan expiry alert email using our simple guide. Get an easy-to-use HTML template to remind your users when their plans are about to expire.

Join us on Telegram

how-to-write-a-plan-expiry-alert-email-with-an-html-template.webp

Read Also

Create Interactive Booking Button with mask-image using HTML and CSS.webp

Create Interactive Booking Button with mask-image using HTML and CSS (Source Code)

Keeping customers happy is important, especially when they have a subscription that’s about to end. Sending a plan expiry alert email is a great way to remind your users to renew their plans before they lose access. In this blog, we’ll show you how to write a simple and effective plan expiry alert email. We’ll also give you an easy HTML template that you can use right away.

Writing an Effective Plan Expiry Alert Email:

A well-designed plan expiry alert email should be clear, concise, and actionable. Here are some key elements to include:

Subject Line: Your subject line should be straightforward and create a sense of urgency, like “Reminder: Your Plan is Expiring Soon.”
Personalization: Address the user by their name to create a more personalized experience.
Plan Details: Clearly mention the plan's name and the expiration date so the user knows which subscription is expiring.
Call to Action (CTA): Include a direct link or button for the user to renew or upgrade their plan easily.
Support Information: Provide contact details so users can reach out if they have questions or need assistance.

Source Code

Step 1 (HTML Code):

The first thing we need to do is create an HTML file to alert users about the upcoming expiration of their plan. We'll start with well-organized markup. After creating the file, just paste the below code into it. Remember to save the file with a .html extension.

Here's a breakdown of the HTML code:

1. DOCTYPE and HTML Structure

<!DOCTYPE html>
<html lang="en">

<!DOCTYPE html>: Declares the document as an HTML5 document.
<html lang="en">: The root element of the HTML document, with the language set to English.

2. Head Section

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plan Expiry Alert - Email Template</title>
</head>

<meta charset="UTF-8">: Sets the character encoding to UTF-8, ensuring the document can display a wide range of characters.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Makes the template responsive by setting the viewport to the device's width.
<title>Plan Expiry Alert - Email Template</title>: Specifies the title of the document, which appears in the browser's title bar or tab.

3. Body Section

<body>
    <table role="presentation" class="container">
        <tr>
            <td>
                <table role="presentation" width="100%" class="header">
                    <tr>
                        <td>
                            <h1>Reminder: Your Plan is Expiring Soon</h1>
                        </td>
                    </tr>
                </table>

<body>: The main content of the HTML document starts here.
<table role="presentation" class="container">: The outermost table acts as a container for the entire email content. The role="presentation" attribute is used to indicate that the table is for layout purposes only and not for displaying data, which improves accessibility for screen readers.
<tr><td>: A table row and cell that contain the main structure of the email.
<table role="presentation" width="100%" class="header">: Another table for the header section, which contains the main heading <h1>.

4. Content Section

<table role="presentation" width="100%" class="content">
                    <tr>
                        <td>
                            <h2>Hello [User's Name],</h2>
                            <p>We hope you're enjoying our services. This is a friendly reminder that your current plan is set to expire on <strong>[Expiration Date]</strong>. We don't want you to miss out on all the benefits you love.</p>
                            <div class="details">
                                <p><strong>Plan Details:</strong></p>
                                <p><strong>Current Plan:</strong> [Plan Name]</p>
                                <p><strong>Expiration Date:</strong> [Expiration Date]</p>
                            </div>
                            <a href="[Renewal Link]" class="cta-button">Renew Your Plan Now</a>
                            <p>If you have any questions or need help with the renewal process, feel free to contact our support team at <a href="mailto:[Support Email]">[Support Email]</a> or call us at [Support Phone Number].</p>
                            <p>Thank you for being a valued customer. We look forward to continuing to serve you!</p>
                        </td>
                    </tr>
                </table>

<table role="presentation" width="100%" class="content">: A table for the main content of the email, ensuring that the layout remains consistent across email clients.
<h2>Hello [User's Name],</h2>: A personalized greeting for the user.
<p>: Paragraphs that explain the purpose of the email, including plan expiration details and a call-to-action.
<div class="details">: A section within the content for displaying specific plan details like the current plan and expiration date.
<a href="[Renewal Link]" class="cta-button">Renew Your Plan Now</a>: A call-to-action button that links to the plan renewal page.

5. Footer Section

<table role="presentation" width="100%" class="footer">
                    <tr>
                        <td>
                            <p>Best regards,<br>
                            [Your Name] | [Your Position] | [Company Name]</p>
                            <p>Need help? <a href="mailto:[Support Email]">Contact Support</a></p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>

<table role="presentation" width="100%" class="footer">: A table for the footer section, which includes the sender's details and contact information.
<p>: Contains a signature from the sender and a link to contact support.

6. Closing Tags

</html>

Closes the HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Plan Expiry Alert - HTML Email Template</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <table role="presentation" class="container">
        <tr>
            <td>
                <table role="presentation" width="100%" class="header">
                    <tr>
                        <td>
                            <h1>Reminder: Your Plan is Expiring Soon</h1>
                        </td>
                    </tr>
                </table>
                <table role="presentation" width="100%" class="content">
                    <tr>
                        <td>
                            <h2>Hello [User's Name],</h2>
                            <p>We hope you're enjoying our services. This is a friendly reminder that your current plan is set to expire on <strong>[Expiration Date]</strong>. We don't want you to miss out on all the benefits you love.</p>
                            <div class="details">
                                <p><strong>Plan Details:</strong></p>
                                <p><strong>Current Plan:</strong> [Plan Name]</p>
                                <p><strong>Expiration Date:</strong> [Expiration Date]</p>
                            </div>
                            <a href="javascript:void(0)" class="cta-button">Renew Your Plan Now</a>
                            <p>If you have any questions or need help with the renewal process, feel free to contact our support team at <a href="javascript:void(0)">[Support Email]</a> or call us at [Support Phone Number].</p>
                            <p>Thank you for being a valued customer. We look forward to continuing to serve you!</p>
                        </td>
                    </tr>
                </table>
                <!-- Footer Section -->
                <table role="presentation" width="100%" class="footer">
                    <tr>
                        <td>
                            <p>Best regards,<br>
                            [Your Name] | [Your Position] | [Company Name]</p>
                            <p>Need help? <a href="javascript:void(0)">Contact Support</a></p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Read Also Create Mobile Product Landing Page using HTML, CSS, and JavaScript.jpg

Create a Mobile Product Landing Page using HTML, CSS, and JavaScript (Source Code)

Step 2 (CSS Code):

Next, we need to style our HTML email template by adding CSS. This will enhance the presentation of the template. Create a CSS file named **styles.css** and paste the provided code into it. Remember to save the file with a .css extension.

Here's a breakdown of each section:

1. Global Styles (body)

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

Font Family: Sets the font to "Poppins" from Google Fonts, with a fallback to sans-serif.
Background Color: Applies a light gray background (#f4f4f4) to the entire page.
Margin & Padding: Removes any default margin and padding from the body element.
Width: Ensures the body takes up 100% of the viewport width.
Text Size Adjust: -webkit-text-size-adjust and -ms-text-size-adjust prevent automatic font size adjustments in mobile browsers, keeping the text size consistent.

2. Table Styles

table {
    border-spacing: 0;
    width: 100%;
}

Border Spacing: Removes spacing between table cells by setting border-spacing: 0.
Width: Ensures that tables take up 100% of the available width.

3. Container

.container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

Width: The container is set to 100% width but is capped at a maximum width of 600px.
Margin: Centers the container horizontally using margin: 0 auto.
Background Color: Sets the container background to white (#ffffff).
Border Radius: Rounds the container corners with an 8px radius.
Overflow: Hides any content that overflows the container boundaries.
Box Shadow: Adds a subtle shadow to give the container a lifted appearance.

4. Header

.header {
    background-color: #3498db;
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

Background Color: Sets the header background to a blue shade (#3498db).
Text Color: Applies white text (#ffffff).
Padding: Adds 20px of padding around the content.
Text Align: Centers the text inside the header.

.header h1 {
    margin: 0;
    font-size: 28px;
    letter-spacing: 1px;
}

Margin: Removes any default margin from the header's h1 element.
Font Size: Set the font size to 28px.
Letter Spacing: Adds a 1px spacing between letters for better readability.

5. Content Section

.content {
    padding: 20px 40px;
    text-align: center;
    color: #333333;
}

Padding: Adds padding of 20px on top and bottom, and 40px on the sides.
Text Align: Centers the content inside the section.
Text Color: Uses a dark gray (#333333) for the text.

.content h2 {
    font-size: 22px;
    margin: 20px 0 10px;
    color: #333333;
}

Font Size: Sets the font size of h2 elements to 22px.
Margin: Adds 20px of space above and 10px below the h2.
Text Color: Uses the same dark gray color as the content.

.content p {
    font-size: 16px;
    line-height: 1.6;
    margin: 10px 0;
}

Font Size: Sets the font size of paragraphs to 16px.
Line Height: Uses a line height of 1.6 for better readability.
Margin: Adds 10px of space above and below each paragraph.

6. Details Section

.details {
    background-color: #f9f9f9;
    padding: 15px;
    margin: 20px 0;
    border-radius: 6px;
    text-align: left;
}

Background Color: Sets a light gray background (#f9f9f9) for the details section.
Padding: Adds 15px of padding around the content.
Margin: Adds 20px of space above and below the details section.
Border Radius: Rounds the corners with a 6px radius.
Text Align: Aligns text to the left.

.details p {
    margin: 5px 0;
}

Margin: Add 5px of space above and below each paragraph inside the details section.

7. Call-to-Action (CTA) Button

.cta-button {
    display: inline-block;
    padding: 15px 30px;
    margin: 20px 0;
    background-color: #f39c12;
    background-image: linear-gradient(135deg, #f39c12, #e74c3c);
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

Display: Makes the button an inline-block element, allowing it to respect padding and margins.
Padding: Adds 15px of padding on top and bottom, and 30px on the sides.
Margin: Adds 20px of space above and below the button.
Background: Sets a gradient background from orange (#f39c12) to red (#e74c3c).
Text Color: Make the button text white (#ffffff).
Font Size: Set the font size to 18px.
Text Decoration: Removes any underline from the button text.
Border Radius: Rounds the button corners with a 30px radius.
Box Shadow: Adds a shadow to give the button a lifted appearance.
Transition: Smoothens changes like hover effects over 0.3 seconds.

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

Hover Effect: When hovered, the button moves up slightly (translateY(-2px)) and the shadow becomes stronger.

8. Footer

.footer {
    background-color: #333333;
    color: #ffffff;
    padding: 20px;
    text-align: center;
    font-size: 14px;
}

Background Color: Uses a dark gray background (#333333).
Text Color: Set the text to white (#ffffff).
Padding: Adds 20px of padding around the content.
Text Align: Centers the text in the footer.
Font Size: Set the font size to 14px.

.footer a {
    color: #f39c12;
    text-decoration: none;
}

Link Color: Makes links in the footer orange (#f39c12).
Text Decoration: Removes any underline from links.

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    width: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
table {
    border-spacing: 0;
    width: 100%;
}
.container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.header {
    background-color: #3498db;
    color: #ffffff;
    padding: 20px;
    text-align: center;
}
.header h1 {
    margin: 0;
    font-size: 28px;
    letter-spacing: 1px;
}
.content {
    padding: 20px 40px;
    text-align: center;
    color: #333333;
}
.content h2 {
    font-size: 22px;
    margin: 20px 0 10px;
    color: #333333;
}
.content p {
    font-size: 16px;
    line-height: 1.6;
    margin: 10px 0;
}
.details {
    background-color: #f9f9f9;
    padding: 15px;
    margin: 20px 0;
    border-radius: 6px;
    text-align: left;
}
.details p {
    margin: 5px 0;
}
.cta-button {
    display: inline-block;
    padding: 15px 30px;
    margin: 20px 0;
    background-color: #f39c12;
    background-image: linear-gradient(135deg, #f39c12, #e74c3c);
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    border-radius: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}
.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.footer {
    background-color: #333333;
    color: #ffffff;
    padding: 20px;
    text-align: center;
    font-size: 14px;
}
.footer a {
    color: #f39c12;
    text-decoration: none;
}

Final Output:

how-to-write-a-plan-expiry-alert-email-with-an-html-template.gif

Read Also

How to Create a Skeuomorphic Like Button Using HTML, CSS, and JavaScript

Conclusion:

Sending a plan expiry alert email is a simple way to remind your customers to renew their plans. By using the tips in this blog and the HTML template provided, you can create clear and effective emails that keep your customers engaged and happy. This small effort can make a big difference in keeping your customers and improving your business.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: plan expiry email, email template, html template, how to write a plan expiry alert email, easy html template for plan expiry, simple guide for plan expiry emails, html email template, html template for subscription expiry notification, effective plan expiry notification email

End of the article

Latest Post

Create Car Registration System Using HTML, CSS, and JavaScript

by Faraz - December 08, 2024

Learn how to create a simple car registration system with HTML, CSS, and JavaScript in this easy step-by-step guide. Build a functional and attractive form with minimal code.