CODEWITHSUNDEEP
phpemailhtml-emaillaravel-5.8
Josh
Josh

Reputation: 1968

Unable to send HTML email in Laravel 5.8

I am having a difficult time sending HTML email through my Laravel application. I have tried to return the view and it returns well but when I send the email to an actual email, it arrives as a plain text email without all the HTML parsing.

My View layout for the email is as follows:

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

<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" 
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" 
  rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="{{ url('design-assets/lib/bootstrap/css/bootstrap.min.css')}}" 
 rel="stylesheet">

 <!-- Main Stylesheet File -->
 <link href="{{ url('design-assets/css/style.css" rel="stylesheet')}}">
 <link href="{{ url('design-assets/css/prof-custom.css')}}" 
 rel="stylesheet">
 @yield('styles')
</head>

<body id="body">
@yield('content')
<!-- JavaScript Libraries -->
<script src="{{ url('design-assets/lib/jquery/jquery.min.js')}}"></script>
<script src="{{ url('design-assets/lib/jquery/jquery-migrate.min.js')}}"> 
</script>
 <script src="{{ url('design-assets/lib/bootstrap/js/bootstrap.bundle.min.js') }}/"></script>

<!-- Contact Form JavaScript File -->
<!-- Template Main Javascript File -->
<script src="{{ url('design-assets/js/main.js') }}"></script>
@yield('scripts')
</body>


The actual email view is as follows:

@extends('layouts.mail')
@section('content')
<div class="card montserrat-font">
<div class="card-header">
    <div class="card-title">Contact Message from the Website</div>
</div>
<div class="card-body">
    <div class="card-text">
        Dear Sir,<br /><br />
    We have a contact from our events website with the following details<br/><br />
    </div>
    <div class="table-responsive">
        <table class="table table-striped">
            <tr>
                <th>Name of Sender:</th><td>{{$mail_info['name']}}</td>
            </tr>
            <tr>
                <th>Email of Sender:</th><td>{{$mail_info['email']}}</td>
            </tr>
            <tr>
                <th>Phone number of Sender:</th><td>{{$mail_info['phone']}}</td>
            </tr>
            <tr>
                <th>Subject of Message:</th><td>{{$mail_info['subject']}}</td>
            </tr>                       
            {{--  <tr>
                <th>Message:</th><td>{{$mail_info['message']}}</td>
            </tr>  --}}
        </table>
    </div>
    <div class="card-title">Message body</div>
    <div class="card-text">
        {!! $mail_info['message'] !!}
    </div>
</div>
</div>
@endsection

The problem is that when I check the format returned from the email view by returning the view as follows: 

 return new \App\Mail\ContactMail(['email' => '[email protected]', 'name' => 'Testing Name','phone'=>'08033776502', 'subject' => 'Just a test', 'message' => "This is  a message returned from testing the view email template"]);

I get a view that represents exactly what I want but when I send the email, it arrives as a plain text email

This is how I call the view through mailable class

<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Queue\ShouldQueue;

class ContactMail extends Mailable
{
    use Queueable, SerializesModels;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public $mail_info;

public function __construct($mail_info_array)
{
    $this->mail_info = $mail_info_array;
}

/**
 * Build the message.
 *
 * @return $this
 */
public function build()
{
    // return $this->view('view.name');
    return $this->view('mails.web-contact', ['mail_info'=>$this->mail_info]);
}
}

and then through the controller as follows:

 public function post_contact(Request $request)
{
    try
    {
        $data = $request->all();
        $this->validate_recaptcher($data['g-recaptcha-response']);
        $this->validator($request->all())->validate();
        \Mail::to('[email protected]')->send(new \App\Mail\ContactMail(['email' => $request->email, 'name' => $request->name,'phone'=>$request->phone, 'subject' => $request->subject, 'message' => $request->message]));
        return redirect()->route('ContactForm')->with('msg',"<div class='alert alert-success'><span class='fa fa-check'></span> Message successfully sent. I will get back to you soon if necessary</div>");
        // return new \App\Mail\ContactMail(['email' => $request->email, 'name'=> $request->name,'phone'=>$request->phone, 'subject' => $request->subject, 'message' => $request->message]);
    }
        catch(Exception $e)
    {
        return back()->withInputs()->with('msg',"<div class='alert alert-danger'><span class='fa fa-warning'></span> ".$e->getMessage()."</div>");
    }        
}

I am using smtp email driver and every other thing is working as expected.

I will appreciate any guide to resolve this

Thank you

Upvotes: 0

Views: 1160

Answers (1)

Adam Rodriguez
Adam Rodriguez

Reputation: 1856

Add your styles inline in the head portion of your email layout. Mail clients tend to ignore externally referenced css. Example:

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

<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">

...

<style type="text/css">
    your custom styles here
</style>

...

</head>
</html>

You can accomplish this using Markdown.

Customizing The CSS After exporting the components, the resources/views/vendor/mail/html/themes directory will contain a default.css file. You may customize the CSS in this file and your styles will automatically be in-lined within the HTML representations of your Markdown mail messages.

Upvotes: 1

Related Questions