Laravel and php
Deals

Laravel & Php

How to send Emails with Laravel 8/7/6/5 with custom email template

Laravel framework provides several advanced features to work with. It has different packages available in the market that makes the integration of emailing functionality effortlessly.

Why Use Laravel to Send Emails?

Laravel offers various tools to configure email in websites. You can check out some options below:

  • Laravel proposes using drivers for SMTP, Mailgun, SparkPost, Amazon SES, and sendmail
  • Laravel provides options for queueing emails
  • In Laravel, you can use Markdown support which is available in a few frameworks. It helps to create awesome templates like buttons or panels and much more
  • You can attach files of different formats (JPEG, PDF), etc, using Laravel Templating system, which lets you use various templates and configure the view

Step 1: Creating Mailable class

php artisan make:mail Newsletter

This command created a file in AppMailNewsletter.php

<?php

namespace AppMail;

use IlluminateBusQueueable;
use IlluminateMailMailable;
use IlluminateQueueSerializesModels;
use IlluminateContractsQueueShouldQueue;

class Newsletter extends Mailable
{
   use Queueable, SerializesModels;
   public $content;
   public $subject;

   /**
    * Create a new message instance.
    *
    * @return void
    */
   public function __construct($content,$subject)
   {
      $this->content = $content;
      $this->subject = $subject;
   }

   /**
    * Build the message.
    *
    * @return $this
    */
   public function build()
   {
      $subject = $this->subject;
      $content = $this->content;
      $from = 'noreply@emailsender.com';
      $name = 'Blue tree digital agency';
      return $this->view('email.newsletter', compact('content'))->from($from, $name)->subject($subject);
   }
}

I have modified the mailable script to include email template and constructs that are passed from the email controller.

Step 2 : Create controller

php artisan make:controller NewsletterController
<?php

namespace AppHttpControllers;

use AppHttpControllersController;
use IlluminateHttpRequest;
use AppMailNewsletter;
use Mail;
use Session;

class NewsletterController extends Controller
{
   public function send_newsletter(Request $request){
            //send mail

            $subject = 'What is happening this week';
            $to = 'subscriber@email.com';
            $content = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus neque, aliquet sed finibus ut, bibendum in dui. Praesent ac malesuada eros. Nunc et lacinia sapien, vehicula rutrum felis. Phasellus nec purus at libero consectetur accumsan eget in ex. Integer efficitur imperdiet condimentum. Nunc porttitor vestibulum orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent odio enim, tempor nec maximus et, bibendum at libero. Vivamus suscipit nisl eget pulvinar vehicula. Nunc vel porttitor augue. Nullam lacinia congue dapibus. Nullam rhoncus eleifend cursus. Praesent ultrices metus at turpis mattis congue. Maecenas ut pellentesque erat. Donec turpis ex, bibendum id auctor in, rutrum et elit. Sed et dui quis mauris accumsan tristique vel nec magna."

            Mail::to($to)->send(new Newsletter($content,$subject));

            Session::flash('success','Newsletter successfully sent');

           return redirect()->back();
   }
}

Step 3 : Email Template

The email template by default is in the view folder, i will share the template at the bottom titles Newsletter template

Step 4 : Setup Mail Drivers from .env

For this section we will use Mailtrap as our mail drivers because we are testing it on our localhost

<!doctype html>
<html>
   <head>
      <meta name="viewport" content="width=device-width" />
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>{!! $subject !!}</title>
      <style>
         img {
         border: none;
         -ms-interpolation-mode: bicubic;
         max-width: 100%;
         }

         body {
         background-color: #f6f6f6;
         font-family: sans-serif;
         -webkit-font-smoothing: antialiased;
         font-size: 14px;
         line-height: 1.4;
         margin: 0;
         padding: 0;
         -ms-text-size-adjust: 100%;
         -webkit-text-size-adjust: 100%;
         }

         table {
         border-collapse: separate;
         mso-table-lspace: 0pt;
         mso-table-rspace: 0pt;
         width: 100%; }
         table td {
            font-family: sans-serif;
            font-size: 14px;
            vertical-align: top;
         }

         .body {
         background-color: #f6f6f6;
         width: 100%;
         }

         .container {
         display: block;
         margin: 0 auto !important;
         /* makes it centered */
         max-width: 580px;
         padding: 10px;
         width: 580px;
         }

         .content {
         box-sizing: border-box;
         display: block;
         margin: 0 auto;
         max-width: 580px;
         padding: 10px;
         }

         .main {
         background: #ffffff;
         border-radius: 3px;
         width: 100%;
         }

         .wrapper {
         box-sizing: border-box;
         padding: 20px;
         }

         .content-block {
         padding-bottom: 10px;
         padding-top: 10px;
         }

         .footer {
         clear: both;
         margin-top: 10px;
         text-align: center;
         width: 100%;
         }
         .footer td,
         .footer p,
         .footer span,
         .footer a {
            color: #999999;
            font-size: 12px;
            text-align: center;
         }

         h1,
         h2,
         h3,
         h4 {
         color: #000000;
         font-family: sans-serif;
         font-weight: 400;
         line-height: 1.4;
         margin: 0;
         margin-bottom: 30px;
         }

         h1 {
         font-size: 35px;
         font-weight: 300;
         text-align: center;
         text-transform: capitalize;
         }

         p,
         ul,
         ol {
         font-family: sans-serif;
         font-size: 14px;
         font-weight: normal;
         margin: 0;
         margin-bottom: 15px;
         }
         p li,
         ul li,
         ol li {
            list-style-position: inside;
            margin-left: 5px;
         }

         a {
         color: #3498db;
         text-decoration: underline;
         }

         .btn {
         box-sizing: border-box;
         width: 100%; }
         .btn > tbody > tr > td {
            padding-bottom: 15px; }
         .btn table {
            width: auto;
         }
         .btn table td {
            background-color: #ffffff;
            border-radius: 5px;
            text-align: center;
         }
         .btn a {
            background-color: #ffffff;
            border: solid 1px #3498db;
            border-radius: 5px;
            box-sizing: border-box;
            color: #3498db;
            cursor: pointer;
            display: inline-block;
            font-size: 14px;
            font-weight: bold;
            margin: 0;
            padding: 12px 25px;
            text-decoration: none;
            text-transform: capitalize;
         }

         .btn-primary table td {
         background-color: #3498db;
         }

         .btn-primary a {
         background-color: #3498db;
         border-color: #3498db;
         color: #ffffff;
         }

         .last {
         margin-bottom: 0;
         }

         .first {
         margin-top: 0;
         }

         .align-center {
         text-align: center;
         }

         .align-right {
         text-align: right;
         }

         .align-left {
         text-align: left;
         }

         .clear {
         clear: both;
         }

         .mt0 {
         margin-top: 0;
         }

         .mb0 {
         margin-bottom: 0;
         }

         .preheader {
         color: transparent;
         display: none;
         height: 0;
         max-height: 0;
         max-width: 0;
         opacity: 0;
         overflow: hidden;
         mso-hide: all;
         visibility: hidden;
         width: 0;
         }

         .powered-by a {
         text-decoration: none;
         }

         hr {
         border: 0;
         border-bottom: 1px solid #f6f6f6;
         margin: 20px 0;
         }
         @media only screen and (max-width: 620px) {
         table[class=body] h1 {
            font-size: 28px !important;
            margin-bottom: 10px !important;
         }
         table[class=body] p,
         table[class=body] ul,
         table[class=body] ol,
         table[class=body] td,
         table[class=body] span,
         table[class=body] a {
            font-size: 16px !important;
         }
         table[class=body] .wrapper,
         table[class=body] .article {
            padding: 10px !important;
         }
         table[class=body] .content {
            padding: 0 !important;
         }
         table[class=body] .container {
            padding: 0 !important;
            width: 100% !important;
         }
         table[class=body] .main {
            border-left-width: 0 !important;
            border-radius: 0 !important;
            border-right-width: 0 !important;
         }
         table[class=body] .btn table {
            width: 100% !important;
         }
         table[class=body] .btn a {
            width: 100% !important;
         }
         table[class=body] .img-responsive {
            height: auto !important;
            max-width: 100% !important;
            width: auto !important;
         }
         }
         @media all {
         .ExternalClass {
            width: 100%;
         }
         .ExternalClass,
         .ExternalClass p,
         .ExternalClass span,
         .ExternalClass font,
         .ExternalClass td,
         .ExternalClass div {
            line-height: 100%;
         }
         .apple-link a {
            color: inherit !important;
            font-family: inherit !important;
            font-size: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
            text-decoration: none !important;
         }
         .btn-primary table td:hover {
            background-color: #34495e !important;
         }
         .btn-primary a:hover {
            background-color: #34495e !important;
            border-color: #34495e !important;
         }
         }

         sub, sup {
            position: relative;
            font-size: 45%;
            line-height: 0;
            vertical-align: baseline;
         }
         sup {
            top: -1.5em;
         }
      </style>
</head>
   <body class="">
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">
         <tr>
            <td> </td>
            <td class="container">
               <div class="content">
                  <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                     <tr>
                        <td class="content-block powered-by">
                           <center><img src="{!! asset('assets/img/logo.png') !!}" alt="Title" class="img" width="50%"></center>
                        </td>
                     </tr>
                  </table>
                  <!-- START CENTERED WHITE CONTAINER -->
                  <span class="preheader">{!! $subject !!}</span>
                  <table role="presentation" class="main">
                     <!-- START MAIN CONTENT AREA -->
                     <tr>
                        <td class="wrapper">
                           <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                              <tr>
                                 <td>
                                    <center><h2>{!! $subject !!}</h2></center>
                                    <hr>
                                    {!! $content !!}
                                 </td>
                              </tr>
                           </table>
                        </td>
                     </tr>
                     <!-- END MAIN CONTENT AREA -->
                  </table>
                  <!-- START FOOTER -->
                  <div class="footer">
                     <table role="presentation" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                           <td class="content-block">
                              <a href="https://www.facebook.com"><img src="{!! asset('assets/img/icons/facebook.png') !!}" alt="winguplus facebook link" style="width:55px;height:55px"/></a>
                              <a href="https://twitter.com"><img src="{!! asset('assets/img/icons/twitter.png') !!}" alt="winguplus twitter link" style="width:55px;height:55px"/></a>
                              <a href="https://www.linkedin.com/company"><img src="{!! asset('assets/img/icons/linkedin.png') !!}" alt="title" style="width:55px;height:55px"/></a>
                           </td>
                        </tr>
                        <tr>
                           <td class="content-block">
                              <span class="apple-link">
                                 Copyright © @php echo date('Y') @endphp <a href="https://bluetreeagency.com/" target="_blank">Blue Tree Agency</a>, All rights reserved.
                              </span>
                           </td>
                        </tr>
                     </table>
                  </div>
                  <!-- END FOOTER -->
                  <!-- END CENTERED WHITE CONTAINER -->
               </div>
            </td>
            <td> </td>
         </tr>
      </table>
   </body>
</html>
MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
MAIL_PASSWORD=xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=noreply@bluetreeagency.com
MAIL_FROM_NAME="${APP_NAME}"
«
»
Laravel
Share with Friends

Like this chef? Share with friends..



Home