Welcome to a comprehensive guide on enhancing your Laravel 10 web application's communication with a sophisticated contact form. In this tutorial, we'll walk through the process of creating a feature-rich Laravel contact form that seamlessly sends emails using Gmail SMTP.
What makes it even more engaging? We'll be incorporating Markdown in Laravel 10 emails, ensuring your correspondence is not only effective but visually appealing.
Let's embark on this journey together, unraveling the power of Laravel's email capabilities.
So, let's see the Laravel 10 Markdown Email Example, Contact Form Email in Laravel 8/9/10, Laravel Email Sending with Markdown, and Markdown in Laravel Email.
Create a new Laravel project if you don't have one:
composer create-project laravel/laravel laravel-10-contact-form
cd laravel-10-contact-form
.env
Update your .env
file with Gmail SMTP configuration:
MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your@gmail.com
MAIL_PASSWORD=your_gmail_password
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=your@gmail.com
MAIL_FROM_NAME="${APP_NAME}"
Define routes in routes/web.php
for the contact form:
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\MailController;
Route::get ('/',[MailController::class,'mailForm']);
Route::post ('/send-mail',[MailController::class,'mailData'])->name('send_mail');
Create a Blade view file for the contact form in resources/views/mail.blade.php
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Laravel 10 Contact Form: Send Email using Gmail SMTP - Techsolutionstuff </title>
</head>
<body>
<section id="contact" class="contact">
<div class="container" data-aos="fade-up">
<div class="row">
<div class="col-lg-7 mt-5 mt-lg-0 d-flex align-items-stretch">
<form action="{{ route('send_mail') }}" method="POST"
enctype="multipart/form-data">
@csrf
<div class="row">
<div class="form-group col-md-6">
<label>Your Name</label>
<input type="text" name="name" class="form-control" required>
</div>
<div class="form-group col-md-6">
<label>Your Email</label>
<input type="email" class="form-control" name="email" required>
</div>
</div>
<div class="form-group">
<label>Subject</label>
<input type="text" class="form-control" name="sub" required>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control" name="mess" rows="10" required></textarea>
</div>
<div class="text-center"><button type="submit">Send Mail</button></div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
Generate a controller to handle the contact form:
php artisan make:controller MailController
app/Http/Controllers/MailController.php
<?php
namespace App\Http\Controllers;
use Mail;
use App\Mail\SendMail;
use Illuminate\Http\Request;
use App\Mail\SendMessageToEndUser;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Route;
class MailController extends Controller
{
public function mailform()
{
return view('mail');
}
public function maildata(Request $request)
{
$name = $request->name;
$email = $request->email;
$sub = $request->sub;
$mess = $request->mess;
$mailData = [
'url' => 'https://sandroft.com/',
];
$send_mail = "test@gmail.com";
Mail::to($send_mail)->send(new SendMail($name, $email, $sub, $mess));
$senderMessage = "thanks for your message , we will reply you in later";
Mail::to( $email)->send(new SendMessageToEndUser($name,$senderMessage,$mailData));
return "Mail Send Successfully";
}
}
Generate a Markdown email Mailable:
php artisan make:mail SendMail --markdown=SendMail
app/Mail/SendMail.php
<?php
namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;
class SendMail extends Mailable
{
use Queueable, SerializesModels;
/**
* Create a new message instance.
*/
public $name, $email, $sub, $mess;
public function __construct($name, $email, $sub, $mess)
{
$this->name = $name;
$this->email = $email;
$this->sub = $sub;
$this->mess = $mess;
}
/**
* Get the message envelope.
*/
public function envelope(): Envelope
{
return new Envelope(subject: $this->sub);
}
/**
* Get the message content definition.
*/
public function content(): Content
{
return new Content(markdown: 'email_to_admin');
}
/**
* Get the attachments for the message.
*
* @return array<int, \Illuminate\Mail\Mailables\Attachment>
*/
public function attachments(): array
{
return [];
}
}
To generate a mailable with a corresponding Markdown template, you may use the --markdown
option of the make:mail
Artisan command. So, let’s run the below command:
php artisan make:mail SendMessageToEndUser --markdown=SendMessageToEndUser
app/Mail/ SendMessageToEndUser.php
<?php
namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Mail\Mailables\Content;
use Illuminate\Mail\Mailables\Envelope;
use Illuminate\Queue\SerializesModels;
class SendMessageToEndUser extends Mailable
{
use Queueable, SerializesModels;
public $senderMessage = '';
public $name = '';
public $url = '';
public $mailData;
/**
* Create a new message instance.
*/
public function __construct( $name, $senderMessage,$mailData )
{
$this->name = $name;
$this->senderMessage = $senderMessage;
$this->mailData = $mailData;
}
/**
* Get the message envelope.
*/
public function envelope(): Envelope
{
return new Envelope(
subject: 'Send Message To End User',
);
}
/**
* Get the message content definition.
*/
public function content(): Content
{
return new Content(
markdown: 'reply_email',
);
}
/**
* Get the attachments for the message.
*
* @return array<int, \Illuminate\Mail\Mailables\Attachment>
*/
public function attachments(): array
{
return [];
}
}
When sending an email, a template is essential to display the message
resources/views/email_to_admin.blade.php
@component('mail::message')
Name: {{ $name }}
Email: {{ $email }}<br>
Subject: {{ $sub }} <br><br>
Message:<br> {{ $mess }}
{{ - @component('mail::button', '$url')
Visit Our Website
@endcomponent - }}
Thanks,
{{ config('app.name') }}
@endcomponent
Create Blade View for Send Reply Email to User
resources/views/reply_email.blade.php
@component('mail::message')
# Hi {{ $name }},
{{ - # {{ $senderMessage }} - }}
Receive your email. We will contact you ASAP.
@component('mail::button', ['url' => $mailData['url']])
Visit Our Website
@endcomponent
Thanks,
{{ config('app.name') }}
@endcomponent
Run your Laravel development server:
php artisan serve
You might also like: