Sending Emails With Attachments In Laravel Using Gmail SMTP

In this tutorial, we’ll guide you through the process of sending emails with attachments in a Laravel application using Gmail as the SMTP server. Follow the steps below to seamlessly configure your Laravel application for Gmail SMTP and enable email functionality.

get it by following the steps –

Configure Gmail SMTP Server in Laravel .env file.
Configure your Google Account Setting
Create Controller
Create view
Update routes
Create Email Template

or you can download the free laravel project to send email using subscription technicalguide.

Send email from gmail

FREE DOWNLOAD

Send download link to:

Step 1: Configure Gmail SMTP Server in Laravel .env file.

MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=Your Gmail ID
MAIL_PASSWORD=Your Gmail Password
MAIL_ENCRYPTION=TLS
MAIL_FROM_ADDRESS=Your Gmail ID
MAIL_FROM_NAME="${laravel_test}"

Explanation:

MAIL_MAILER: Set to SMTP.
MAIL_HOST: Use smtp.gmail.com for Gmail.
MAIL_PORT: Default is 587.
MAIL_USERNAME and MAIL_PASSWORD: Your Gmail credentials. Generate an app password for enhanced security.
MAIL_ENCRYPTION:
- SSL – If SSL certificate is enabled. secure connection.
- TLS – If SSL is not installed. not secure.
MAIL_FROM_ADDRESS: Your Gmail ID.
MAIL_FROM_NAME: Display name in the email.

Step 2: Configure Your Google Account Settings

The old method has now been blocked by Google, so now you have to change the account in the new way.Less secure app access is now deprecated.

Follow these steps to create an app password:

You need to create an app password to send email from Gmail. You can set up your Gmail account with the help of the below screenshot.

Click on manage your google account button, After that go to the Security menu.

Send email with attachment from gmail in laravel

Step 3: Create Controller

Run the following command to create a controller:

php artisan make:controller ContactUsController

Create a directory: public/uploads/

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Mail;

class ContactUsController extends Controller
{
    public function contactUs()
    {
        return view('contact');
    }

    public function saveContact(Request $request)
    {
        // Validation logic

        $getFile = "";

        \Mail::send('contact_email', [...], function($message) use ($request) {
            // Email sending logic
        });

        return back()->with('success', 'Thank you for contacting us!');
    }
}

Step 4: Create view

File Name: contact.blade.php

<!DOCTYPE html>
<html>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        /* Conatct start */

        .header-title {
            text-align: center;
            color: #00bfff;
        }

        #tip {
            display: none;
        }

        .fadeIn {
            animation-duration: 3s;
        }

        .form-control {
            border-radius: 0px;
            border: 1px solid #EDEDED;
        }

        .form-control:focus {
            border: 1px solid #00bfff;
        }

        .textarea-contact {
            resize: none;
        }

        .btn-send {
            border-radius: 0px;
            border: 1px solid #00bfff;
            background: #00bfff;
            color: #fff;
        }

        .btn-send:hover {
            border: 1px solid #00bfff;
            background: #fff;
            color: #00bfff;
            transition: background 0.5s;
        }

        .second-portion {
            margin-top: 50px;
        }

        @import "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css";
        @import "http://fonts.googleapis.com/css?family=Roboto:400,500";

        .box>.icon {
            text-align: center;
            position: relative;
        }

        .box>.icon>.image {
            position: relative;
            z-index: 2;
            margin: auto;
            width: 88px;
            height: 88px;
            border: 8px solid white;
            line-height: 88px;
            border-radius: 50%;
            background: #00bfff;
            vertical-align: middle;
        }

        .box>.icon:hover>.image {
            background: #333;
        }

        .box>.icon>.image>i {
            font-size: 36px !important;
            color: #fff !important;
        }

        .box>.icon:hover>.image>i {
            color: white !important;
        }

        .box>.icon>.info {
            margin-top: -24px;
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid #e0e0e0;
            padding: 15px 0 10px 0;
            min-height: 163px;
        }

        .box>.icon:hover>.info {
            background: rgba(0, 0, 0, 0.04);
            border-color: #e0e0e0;
            color: white;
        }

        .box>.icon>.info>h3.title {
            font-family: "Robot", sans-serif !important;
            font-size: 16px;
            color: #222;
            font-weight: 700;
        }

        .box>.icon>.info>p {
            font-family: "Robot", sans-serif !important;
            font-size: 13px;
            color: #666;
            line-height: 1.5em;
            margin: 20px;
        }

        .box>.icon:hover>.info>h3.title,
        .box>.icon:hover>.info>p,
        .box>.icon:hover>.info>.more>a {
            color: #222;
        }

        .box>.icon>.info>.more a {
            font-family: "Robot", sans-serif !important;
            font-size: 12px;
            color: #222;
            line-height: 12px;
            text-transform: uppercase;
            text-decoration: none;
        }

        .box>.icon:hover>.info>.more>a {
            color: #fff;
            padding: 6px 8px;
            background-color: #63B76C;
        }

        .box .space {
            height: 30px;
        }

        @media only screen and (max-width: 768px) {
            .contact-form {
                margin-top: 25px;
            }

            .btn-send {
                width: 100%;
                padding: 10px;
            }

            .second-portion {
                margin-top: 25px;
            }
        }

        /* Conatct end */
    </style>
</head>
<div class="container animated fadeIn">

    <div class="row">
        <h1 class="header-title"> Contact Us</h1>
        <hr>
        <div class="col-sm-12" id="parent">
            <div class="col-sm-6">
                <iframe width="100%" height="320px;" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJaY32Qm3KWTkRuOnKfoIVZws&key=AIzaSyAf64FepFyUGZd3WFWhZzisswVx2K37RFY" allowfullscreen></iframe>

            </div>

            <div class="col-sm-6">



                <div class="message">
                    <DIV class="row">
                        <div class="col-md-12" style="color:red;">
                            @if($errors->any())
                            {!! implode('', $errors->all('<div>:message</div>')) !!}
                            @endif
                        </div>

                        <div class="col-md-12" style="color:green;">
                            @if (session('success'))
                            <div class="alert alert-success">
                                <p class="msg"> {{ session('success') }}</p>
                            </div>
                            @endif
                        </div>

                    </DIV>

                </div>


                <form action="{{ url('/')}}/saveContact" method="post" id="form_contact" role="form" class="form-horizontal" enctype="multipart/form-data">
                    @csrf

                    <div class="form-group">
                        {{ Form::text('yname', null, ['class' => 'form-control', 'placeholder' => 'Your Name', 'autofocus' => '','required' => 'required']) }}

                    </div>


                    <div class="form-group form_left">
                        {{ Form::text('email', null, ['class' => 'form-control', 'placeholder' => 'Your Email']) }}

                    </div>

                    <div class="form-group">
                        {{ Form::text('pnumber', null, ['class' => 'form-control', 'placeholder' => 'Phone Number']) }}
                    </div>
                    <div class="form-group">
                        {{ Form::textarea('comment', null, ['rows'=>'3','class' => 'form-control', 'placeholder' => 'comment']) }}
                    </div>

                    <div class="form-group">
                        {{ Form::file('cover', ['id' => 'cover']) }}
                    </div>

                    <br>
                    <button class="btn btn-default btn-send"> <span class="glyphicon glyphicon-send"></span> Send </button>
                </form>
            </div>
        </div>
    </div>

    <div class="container second-portion">
        <div class="row">
            <!-- Boxes de Acoes -->
            <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="box">
                    <div class="icon">
                        <div class="image"><i class="fa fa-envelope" aria-hidden="true"></i></div>
                        <div class="info">
                            <h3 class="title">MAIL & WEBSITE</h3>
                            <p>
                                <i class="fa fa-envelope" aria-hidden="true"></i> &nbsp info@technicalguide.net
                                <br>
                                <br>
                                <i class="fa fa-globe" aria-hidden="true"></i> &nbsp www.technicalguide.net
                            </p>

                        </div>
                    </div>
                    <div class="space"></div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="box">
                    <div class="icon">
                        <div class="image"><i class="fa fa-mobile" aria-hidden="true"></i></div>
                        <div class="info">
                            <h3 class="title">CONTACT</h3>
                            <p>
                                <i class="fa fa-mobile" aria-hidden="true"></i> &nbsp (+91)-9009XXXXX
                                <br>
                                <br>
                                <i class="fa fa-mobile" aria-hidden="true"></i> &nbsp (+91)-7000XXXX
                            </p>
                        </div>
                    </div>
                    <div class="space"></div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-lg-4">
                <div class="box">
                    <div class="icon">
                        <div class="image"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
                        <div class="info">
                            <h3 class="title">ADDRESS</h3>
                            <p>
                                <i class="fa fa-map-marker" aria-hidden="true"></i> &nbsp Zone 1
                                "MP Nagar", Bhopal - 462023.
                            </p>
                        </div>
                    </div>
                    <div class="space"></div>
                </div>
            </div>
            <!-- /Boxes de Acoes -->

            <!--My Portfolio  dont Copy this -->

        </div>
    </div>

</div>

</html>

Step 5: Update routes

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('contact-us', 'App\Http\Controllers\ContactUsController@contactUs');
Route::post('saveContact', 'App\Http\Controllers\ContactUsController@saveContact');

Step 6: Create Email Template

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

	<html>
        <body>
        <div align="center">
             <div style="max-width: 680px; min-width: 500px; border: 2px solid #e3e3e3; border-radius:5px; margin-top: 20px">   
        	    <div>
        	        <img src="https://technicalguide.net/wp-content/uploads/2022/10/green_tech.png" width="250" alt="TechnicalGuide" border="0"  />
        	    </div> 
        	    <div  style="background-color: #fbfcfd; border-top: thick double #cccccc; text-align: left;">
        	        <div style="margin: 30px;">
             	        <p>
                 	        Dear Admin,<br> <br>
                 	        Welcome to TechnicalGuide!<br> <br>
                 	        We have recieved new user information. Here are the details:<br><br>
             	        </p>
             	        <table style="text-align: left;">
             	            <tr>
             	                <th>Name</th>
             	                <td>: {{ $yname }}</td>
             	            </tr>
             	            <tr>
             	                <th>Email</th>
             	                <td>: {{ $email }}</td>
             	            </tr>
             	         
             	            <tr>
             	                <th>Mobile No</th>
             	                <td>: {{ $pnumber }}</td>
             	            </tr>
             	            <tr>
             	                <th>Message</th>
             	                <td>: {{ $comment }}</td>
             	            </tr>
             	        </table>
             	        <br>  <br>
             	       
             	           
                            Please resolve user conncern.<br><br>
                            Once again, thank you!!!<br><br>
                        
             	        <div style="text-align: Right;">
             	            With warm regards,<br>
                            Create TechnicalGuide Team
             	        </div>
             	    </div>
        	    </div>   
        	</div>   
    	</div>
  	    <center>2022 © TechnicalGuide. ALL Rights Reserved.</center>
    	</body>
	</html>

Our other article lists:

Sending Emails with Attachments in Laravel Using Gmail SMTP

Byadmin

Send email from gmail

Step 1: Configure Gmail SMTP Server in Laravel .env file.

Step 2: Configure Your Google Account Settings

Step 3: Create Controller

Step 4: Create view

Step 5: Update routes

Step 6: Create Email Template

By admin

Related Post

Understanding Laravel Pulse: A Comprehensive Guide

Presenting the Laravel Number Utility Class

Forecasting the Future: 2024 Trends in Software Development

Leave a Reply Cancel reply

You missed

Unveiling Gemini: Google’s Groundbreaking Multimodal AI Era

Understanding Laravel Pulse: A Comprehensive Guide

Presenting the Laravel Number Utility Class

Forecasting the Future: 2024 Trends in Software Development