Laravel 10 Contact Form: Send Email using Gmail SMTP


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.

Step 1: Set Up a New Laravel 10 Project

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

 

Step 2: Configure Gmail SMTP in .env

Update your .env file with Gmail SMTP configuration:

MAIL_MAILER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
[email protected]
MAIL_PASSWORD=your_gmail_password
MAIL_ENCRYPTION=tls
[email protected]
MAIL_FROM_NAME="${APP_NAME}"

 

Step 3: Create Routes

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

 

Step 4: Create a Blade View for the Contact Form

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>

 

 

Step 5: Create a MailController

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 = "[email protected]";
		
		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";
	}
}

 

Step 6: Create a Markdown Email Mailable

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 [];
	}
}

 
Step 7: Send a Reply Email to the User

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 [];
	}
}

 

 

Step 8: Create Blade View for Send Email to Admin

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

 

Step 9: Test Your Contact Form

Run your Laravel development server:

php artisan serve

 


You might also like:

RECOMMENDED POSTS

FEATURE POSTS