Create a contact form with Laravel

In this article we will create a working contact form with Laravel 9. At the bottom of the post you can download the finished project.

First, we need to create a new Laravel Project. If you have the Laravel installer installed you can use the following command:

laravel new [your_project_name]

if not, use composer to install Laravel:

composer create-project laravel/laravel [your_project_name]

Once installed, make sure to fill out your database details in your .env file, although we are not going to need database in this tutorial.

Test SMTP details

Once we are ready with the contact form we will need to test if the emails are sent properly. In order to do that we will need some kind of SMTP service. For this we can use Mailtrap. Go ahead and create an account. Once your account is created, you’ll be provided with SMTP details that you can add to your .env file. You will need to provide the followings:

MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=your_username
MAIL_PASSWORD=your_password
MAIL_ENCRYPTION=TLS
MAIL_FROM_ADDRESS=any_of_your_email_address

Contact controller

Let’s create a contact controller. In your terminal type:

php artisan make:controller ContactController

First we need to import Laravel’s email API. At the top of the controller file, add:

use Mail;

In the ContactController we will need two methods, one for displaying the contact form, and another to send the actual data.

First create a simple index method that will return a view.

public function index()
{
return view('contact');
}

Now, let’s go and create the view file.

The Contact View and Routes

In the resources -> views folder, create a file called “contact.blade.php”

In this example, I’m not going to create any layout so just add and HTML boilerplate structure to the file. In the head section I’ll just add a bootstrap cdn link like this:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">

and before the closing body tag I’ll just add the Bootstrap javascript cdn link:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

Before we add anything to the view, quickly go to the “routes” folder and open the web.php file. At the top pull in the ContactController file.

use App\Http\Controllers\ContactController;

and create a route that will handle the index method

Route::get('contact', [ContactController::class, 'index'])->name('contact');

Now we can check if the view is loaded ok. Add some temporary text to the view file and start the Laravel server in your terminal: php artisan serve

and try to access the page via http://127.0.0.1:8000/contact

if it loads ok, let’s create the form. Add the following content inside the body of the contact.blade.php

<div class="container">

<h1 class="text-center mt-3">Contact us</h1>

<form action="" method="POST">
@csrf

<div class="mb-3">
<label for="firstName" class="form-label">Your name</label>
<input type="text" name="fname" class="form-control @error('fname') is-invalid @enderror" id="firstName" value="{{old('fname')}}">
@error('fname')
<div style="color: red; font-size: 13px;">{{ $message }}</div>
@enderror
</div>
<div class="mb-3">
<label for="yourEmail" class="form-label">Your email</label>
<input type="email" name="email" class="form-control @error('email') is-invalid @enderror" id="yourEmail" placeholder="name@example.com" value="{{old('email')}}">
@error('email')
<div style="color: red; font-size: 13px;">{{ $message }}</div>
@enderror
</div>
<div class="mb-3">
<label for="subject" class="form-label">Subject</label>
<input type="text" name="subject" class="form-control @error('subject') is-invalid @enderror" id="subject" value="{{old('subject')}}">
@error('subject')
<div style="color: red; font-size: 13px;">{{ $message }}</div>
@enderror
</div>
<div class="mb-3">
<label for="messageBody" class="form-label">Your message</label>
<textarea class="form-control @error('messageBody') is-invalid @enderror" name="messageBody" id="messageBody" rows="5">{{old('messageBody')}}</textarea>
@error('messageBody')
<div style="color: red; font-size: 13px;">{{ $message }}</div>
@enderror
</div>

<div>
<button type="submit" class="btn btn-primary">Send message</button>
</div>

</form>
</div>

Here we only have three fields, a first name, email and message. We use Laravel’s old helper to retain the old data in case the form encounters any problem and is not sent. And we also display some error messages if the formsubmission fails.

Now let’s go back to the controller file.

Create sendForm method

In our controller file we create our second method called sendForm. Here is the entire code for this method:

public function sendForm(Request $request)
{

$this->validate($request, [
'fname' => 'required|string|min:1',
'email' => 'required|email:filter',
'subject' => 'required|string|min:1',
'messageBody' => 'required|min:3',
]);

$siteName = env('APP_NAME', '');

$data = array(
'fname' => $request->fname,
'email' => $request->email,
'subject' => $siteName . ' - ' . $request->subject,
'messageBody' => nl2br(htmlspecialchars($request->messageBody)),
'subject_without_site_title' => $request->subject
);

if( env('MAIL_FROM_ADDRESS') != '' )
{
$mailFrom = env('MAIL_FROM_ADDRESS');

try
{
Mail::send('emails.contact', $data, function($message) use ($data, $mailFrom) {
$message->from($mailFrom);
$message->to($mailFrom);
$message->subject($data['subject']);
});
}
catch(\Exception $e)
{
return redirect()->back()->with('failureMsg', 'Message not sent!')->withInput();
}
}
else
{
return redirect()->back()->with('failureMsg', 'Message not sent!')->withInput();
}

return redirect()->back()->with('successMsg', 'Message sent successfully!');

}

First we add “Request” to the method in order to have access to all the request data and then we validate the data coming from our contact form. After this we store our APP_NAME in a variable called “siteName”. Make sure you added your app name/site title in your .env file.

Then we store our data from the contact form in an array.

Now the “subject_without_site_title” key doesn’t come from our form. It will be used in the contact email content because the “subject” also contains the site name.

In an if statement we check if the MAIL_FROM_ADDRESS in the .env file is not empty. If not, we store that email address in a variable and send the email message in a try-catch statement using Laravel’s email API.

The “send” method accepts three arguments. The first one is the view file that contains the content of the email that will be sent. The second is the data that we just validated, and this data will also be passed to the view file. The third argument is a closure that allows us to send header information such as from, to, subject etc.

In case of a submission failure, we redirect the user to the contact page with error messages.

The content of the email that will be sent is going to be another blade file which we will create in a second and it’s going to be in the “resources -> views -> emails” folder. Here we will create another contact.blade.php file.

The content of this file will be:

<h2 style="margin-top: 25px;">Hello</h2>

<p>You are receiving this email from: {{ env('APP_URL') }}</p>
<p>Message details:</p>

<p><strong>Message sent by:</strong> {{ $fname }}</p>
<p><strong>Subject:</strong> {{ $subject_without_site_title }}</p>
<p><strong>Sender's email:</strong> {{ $email }}</p>
<hr style="height: 1px; background-color: #9cc1d3; border: none;">
<br>
<p><strong>Message content:</strong></p>
{!! $messageBody !!}

Of course, you can style it any way you want. Here we can use the array keys as variables to output the data from the submitted contact form.

We are almost done. We only have a few small things to do.

Let’s go to the web.php file and add a route for posting the form.

Route::post('contact/send', [ContactController::class, 'sendForm'])->name('sendcontact');

We need to add this route to the form action, so go back to the contact.blade.php where we have the form and add the following route to the action attribute:

<form action="{{ route('sendcontact') }}" method="POST">

If you look at our sendForm method we have error and success messages. We need to be able to display those messages in our view. Add the following code above the “form” tag:

@if(session('successMsg'))
<div class="alert alert-success alert-dismissible fade show mt-1" role="alert">
<strong>{{ session('successMsg') }}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

@if(session('failureMsg'))
<div class="alert alert-danger alert-dismissible fade show mt-1" role="alert">
<strong>{!! session('failureMsg') !!}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

Now, you can test email sending. If you don’t fill out the form and try to send it, you’ll receive the error messages displayed under each field in the view.

Download finished project here!