Tutorial: Creating a Newsletter Subscription Confirmation Email Template with MJML

Tutorial: Creating a Newsletter Subscription Confirmation Email Template with MJML

In this tutorial, we will create a responsive email template using MJML for confirming a newsletter subscription. MJML makes it easy to design responsive emails that look great on any device. Follow the steps below to build a clean and simple confirmation email.

Step 1: Setting Up the Basic Structure

Start with the basic MJML structure. This includes the root <mjml> tag, the <mj-body> for the email content, and a <mj-section> for the different parts of the email.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>
          <!-- Your content will go here -->
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Step 2: Adding a Header

We'll add a header with a simple logo. You can use a free image from Unsplash for this example.

<mj-section>
  <mj-column>
    <mj-image width="100px" src="https://source.unsplash.com/random/100x100?logo" alt="Logo" />
  </mj-column>
</mj-section>

Step 3: Adding the Confirmation Message

Next, add the text content to welcome the user and confirm their subscription.

<mj-section>
  <mj-column>
    <mj-text font-size="20px" font-weight="bold">
      Welcome to Our Newsletter!
    </mj-text>
    <mj-text>
      Thank you for subscribing to our newsletter. We're excited to share our latest updates and offers with you.
    </mj-text>
  </mj-column>
</mj-section>

Step 4: Adding a Call to Action Button

Include a call to action button that prompts the user to visit your website.

<mj-section>
  <mj-column>
    <mj-button background-color="#f45e43" color="#ffffff" href="https://yourwebsite.com">
      Visit Our Website
    </mj-button>
  </mj-column>
</mj-section>

Step 5: Adding Footer

Finish with a simple footer.

<mj-section>
  <mj-column>
    <mj-text font-size="12px" color="#999999">
      You are receiving this email because you subscribed to our newsletter.
    </mj-text>
    <mj-text font-size="12px" color="#999999">
      © 2024 Your Company. All rights reserved.
    </mj-text>
  </mj-column>
</mj-section>

Complete Example

Here’s the complete MJML code for the newsletter subscription confirmation email template.

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-image width="100px" src="https://source.unsplash.com/random/100x100?logo" alt="Logo" />
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-text font-size="20px" font-weight="bold">
          Welcome to Our Newsletter!
        </mj-text>
        <mj-text>
          Thank you for subscribing to our newsletter. We're excited to share our latest updates and offers with you.
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-button background-color="#f45e43" color="#ffffff" href="https://yourwebsite.com">
          Visit Our Website
        </mj-button>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-text font-size="12px" color="#999999">
          You are receiving this email because you subscribed to our newsletter.
        </mj-text>
        <mj-text font-size="12px" color="#999999">
          © 2024 Your Company. All rights reserved.
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Conclusion

Using MJML, you can create beautiful and responsive email templates with ease. This tutorial covers the basics of creating a subscription confirmation email. For more advanced features, check out the MJML documentation. Happy coding!