Mail Send in Laravel 8 Design CSS3 HTML5
step 1: Install Laravel Project
First Install a Laravel project to run the below command
composer create-project --prefer-dist laravel/laravel sendmail_laravel8Step 2: Setup Database Credentials
Create a new database custom auth and now open your .env file and add your database credentials
Step 3: Update SMTP Details in .env File
First update your email trap details in your .env file just like below, You can send an email via log. If you have not to email trap details got to this link and create a new account.
MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your email
MAIL_PASSWORD='your password'
MAIL_ENCRYPTION=tlsStep 4: Add Routes
Now create two routes in your web.php file one for showing form and another is sending email to the user which you want.
routes\web.php
Route::get('/email', [App\Http\Controllers\EmailController::class, 'create']); Route::post('/email', [App\Http\Controllers\EmailController::class, 'sendEmail'])->name('send.email');
Step 5: Update Controller
You can create a new controller or update these methods in your existing controller. Here we create a new controller you can also create a new after running the below command.
php artisan make:controller EmailControllerAfter successfully create a new controller you can update the below code in your file.
app\Http\Controllers\EmailController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Mail;
class EmailController extends Controller
{
public function create()
{
return view('email');
}
public function sendEmail(Request $request)
{
$request->validate([
'email' => 'required|email',
'subject' => 'required',
'name' => 'required',
'content' => 'required',
]);
$data = [
'subject' => $request->subject,
'name' => $request->name,
'email' => $request->email,
'content' => $request->content
];
Mail::send('email-template', $data, function($message) use ($data) {
$message->to($data['email'])
->subject($data['subject']);
});
return back()->with(['message' => 'Email successfully sent!']);
}
}
Step 6: Create a Blade FIle
Now you need to create a blade file where you show the email send the form in Laravel.
resources\views\email.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>soengsouy.com</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link href='https://www.soengsouy.com/favicon.ico' rel='icon' type='image/x-icon'/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
<div class="bg-contact100" style="background-image: url('images/bg-01.jpg');">
<div class="container-contact100">
<div class="wrap-contact100">
<div class="contact100-pic js-tilt" data-tilt>
<img src="images/img-01.png" alt="IMG">
</div>
<form action="{{ route('send.email') }}" class="contact100-form validate-form" method="post">
@csrf
<span class="contact100-form-title">
Contact Form
</span>
@if(session()->has('message'))
<div class="alert alert-success">
{{ session()->get('message') }}
</div>
@endif
<div class="wrap-input100 validate-input" data-validate = "Name is required">
<input class="input100" type="text" name="name" placeholder="Name">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-user" aria-hidden="true"></i>
</span>
@error('name')
<span class="text-danger"> {{ $message }} </span>
@enderror
</div>
<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
<input class="input100" type="text" name="email" placeholder="Email">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
</div>
<div class="wrap-input100 validate-input" data-validate = "Subject is required">
<input class="input100" type="text" name="subject" placeholder="subject">
<span class="focus-input100"></span>
<span class="symbol-input100">
<i class="fa fa-envelope" aria-hidden="true"></i>
</span>
@error('subject')
<span class="text-danger"> {{ $message }} </span>
@enderror
</div>
<div class="wrap-input100 validate-input" data-validate = "Message is required">
<textarea class="input100" name="content" placeholder="Message"></textarea>
<span class="focus-input100"></span>
@error('content')
<span class="text-danger"> {{ $message }} </span>
@enderror
</div>
<div class="container-contact100-form-btn">
<button type="submit" class="contact100-form-btn">
Send
</button>
</div>
</form>
</div>
</div>
</div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/tilt/tilt.jquery.min.js"></script>
<script >
$('.js-tilt').tilt({
scale: 1.1
})
</script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-23581568-13');
</script>
</body>
</html>
Step 6: Email Template
When we send an email then we need a template that shows the message.
resources\views\email-template.blade.php
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Welcome!</div>
<div class="card-body">
@if (session('resent'))
<div class="alert alert-success" role="alert">
{{ __('A fresh mail has been sent to your email address.') }}
</div>
@endif
{!! $content !!}
</div>
</div>
</div>
</div>
</div>
Great! You successfully lean Email Send Example in Laravel. I hope it works for you. If you have any questions don’t hesitate to drop a message below.
3 Comments
i am not able to send the name from the contact form. can you tell what can I do?
ReplyDelete(y)
ReplyDeletehi, the email is not sent!! can u help plz
ReplyDeleteCAN FEEDBACK
Emoji