Laravel 8 Send Email Contact Form

Laravel

17

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.

Laravel 8 Send Email/Mail Contact Form

  • Install Laravel 8 App
  • Setup SMTP Credentials in .env
  • Create Controller with Method
  • Create Route
  • Create Blade View
  • Start development server
  • Email Send and Test

Install Laravel 8 App

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

Setup SMTP Credentials in .env

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.

Create Controller with Method

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');
         }
    }
}

Create Route

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']);

Create Blade View

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>

Start development server

You can use the following command artisan command to start the development server:

php artisan serve

Email Send And Test

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