Laravel
202
Sumit Suryavanshi
19-11-2020
Laravel 8 send email from contact us form. In this example, i will show you how to send email from contact us form in laravel 8 app. And You will learn step by step how to configure email smtp detail and send mails/emails.
Laravel has supported many API and drivers like SMTP, SendMail, Mailgun, Sendgrid, Mandrill, Amazon SES, SmartPost, Gmail etc for send mail/email for laravel web applications.
When you are working with Laravel web application. So you have to send mail to users in many ways. Like sometimes the user has to send email verification email. Or send an invoice in the mail. Or other types of information need to be sent in email.
First Step, you need to download or install laravel web application new setup on your local machine. you can use the following command to download or install laravel application new setup:
composer create-project laravel/laravel blog –-prefer-dist
If you want to install a specific version of laravel, you can follow the following tutorial
https://w3alert.com/laravel-tutorial/laravel-install-on-windows-ubuntu-with-composer
This is the first step, go to .env file and set SMTP details in .env file.
You could do like:
MAIL_DRIVER=smtp MAIL_HOST=smtp.gmail.com MAIL_PORT=587 MAIL_USERNAME=Add your user name here MAIL_PASSWORD=Add your password here MAIL_ENCRYPTION=tls
The above email SMTP details are default and necessary. You can also set the following things:
MAIL_FROM_ADDRESS=
MAIL_FROM_NAME=
The above are used by Laravel web applications when you will send emails/mails to users. The from email address and name part of the email that is displayed to users.
This is the second step. in this step, we will create a controller for sending emails/mails.
Just open your command prompt (CMD) and go to your project root directory. Then type the below command for creating a new controller.
php artisan make:controller MailController
After that, You need to create one method in your controller. So go to the => app/Http/Controllers/MailController.php And update the below given code into your controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Redirect,Response,DB,Config;
use Mail;
class MailController extends Controller
{
public function index()
{
return view('contact-us');
}
public function sendEmail(Request $request)
{
$data['title'] = "This is first mail from w3alert1.com";
Mail::send('email', $data, function($message) {
$message->to($request->email, $request->name)
->subject('W3alert.com');
});
if (Mail::failures()) {
return response()->Fail('Sorry! Please try again latter');
}else{
return response()->success('Great! Successfully send in your mail');
}
}
}
Next step, here you need to create one route and one blade view file.
So go to routes/web.php and update the following route in your file:
use App\Http\Controllers\MailController;
Route::get('email-contact-form', [MailController::class, 'index']);
Route::post('send-email', [MailController::class, 'sendEmail']);
After that, go to your resources/views/ and create a new blade view file name contact-us.blade.php and update the below code into your file:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Send Email Contact US Form Example - W3alert.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<style>
.error{
color: #FF0000;
}
</style>
</head>
<body>
<div class="container mt-4">
<div class="card">
<div class="card-header text-center font-weight-bold">
<h2>Laravel 8 Send Email Contact US Form Example</h2>
</div>
<div class="card-body">
<form name="contactUsForm" id="contactUsForm" method="post" action="javascript:void(0)">
@csrf
<div class="form-group">
<label for="exampleInputEmail1">Name</label>
<input type="text" id="name" name="name" class="form-control">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" id="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Message</label>
<textarea name="message" id="message" class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
</div>
</div>
<script>
if ($("#contactUsForm").length > 0) {
$("#contactUsForm").validate({
rules: {
name: {
required: true,
maxlength: 50
},
email: {
required: true,
maxlength: 50,
email: true,
},
message: {
required: true,
maxlength: 300
},
},
messages: {
name: {
required: "Please enter name",
maxlength: "Your name maxlength should be 50 characters long."
},
email: {
required: "Please enter valid email",
email: "Please enter valid email",
maxlength: "The email name should less than or equal to 50 characters",
},
message: {
required: "Please enter message",
maxlength: "Your message name maxlength should be 300 characters long."
},
},
submitHandler: function(form) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#submit').html('Please Wait...');
$("#submit"). attr("disabled", true);
$.ajax({
url: "{{url('send-email')}}",
type: "POST",
data: $('#contactUsForm').serialize(),
success: function( response ) {
$('#submit').html('Submit');
$("#submit"). attr("disabled", false);
alert('Great! Successfully send in your mail');
document.getElementById("contactUsForm").reset();
}
});
}
})
}
</script>
</body>
</html>
After that, go to your resources/views/ and create a new blade view file name email.blade.php and update the below code into your file:
<h1>{{ $title }}</h1>
<p>This is my first Email using Laravel Application</p>
You can use the following command artisan command to start the development server:
php artisan serve
Hit the following URL in your browser and test:
http://localhost:8000/email-contact-form
If you are not run PHP artisan server command, direct go to your browser and type the URL
http://localhost/blog/public/email-contact-form