Sending an e-mail using Laravel and jQuery in laravel

When creating a contact form, we may choose to let the user send the form asynchronously.
Using Laravel and jQuery, we can have the form submitted without needing the user to go to a
different page.

Getting ready

For this recipe, we need a standard Laravel installation and our mail client properly
configured. We can update our mail configuration in the app/config/mail.php file.

How to do it…

To complete this recipe, follow the given steps:
1. In the views directory, create a file named emailform.php as shown in the
following code:
<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title></title>
<script src=”//ajax.googleapis.com/ajax/libs
/jquery/1.10.2/jquery.min.js”></script>
</head>
<body>
<div id=”container”>
<div id=”error”></div>
<form id=”email-form”>
<label>To: </label>
<input name=”to” type=”email”><br>
<label>From: </label>
<input name=”from” type=”email”><br>
<label>Subject: </label>
<input name=”subject”><br>
<label>Message:</label><br>
<textarea name=”message”></textarea><br>
<input type=”submit” value=”Send”>
</form>
</div>
<script>
$(function(){
$(“#email-form”).on(‘submit’, function(e){
e.preventDefault();
$.post(’email-send’, $(this).serialize(), function(data){
if (data == 0) {
$(“#error”).html(‘<h3>There was an error</h3>’);

} else {
if (isNaN(data)) {
$(“#error”).html(‘<h3>’ + data + ‘</h3>’);
} else {
$(“#container”).html(‘Your email has been sent!’);
}
}
});
});
});
</script>
</body>
</html>

2. In the views folder, create our e-mail template view file named ajaxemail.php
with the following code:
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<meta charset=”utf-8″>
</head>
<body>
<h2>Your Message:</h2>
<div><?= $message ?></div>
</body>
</html>
3. In the routes.php file, create the routes as given in the following code snippet:
Route::get(’email-form’, function()
{
return View::make(’emailform’);
});
Route::post(’email-send’, function()
{
$input = Input::all();
$rules = array(
‘to’ => ‘required|email’,
‘from’ => ‘required|email’,
‘subject’ => ‘required’,
‘message’ => ‘required’
);
$validation = Validator::make($input, $rules);
if ($validation->fails())

{
$return = ”;
foreach ($validation->errors()->all() as $err) {
$return .= $err . ‘<br>’;
}
return $return;
}
$send = Mail::send(‘ajaxemail’, array(‘message’ =>
Input::get(‘message’)), function($message)
{
$message->to(Input::get(‘to’))
->replyTo(Input::get(‘from’))
->subject(Input::get(‘subject’));
});
return $send;
});

How it works…

For this recipe, we need to have our e-mail client properly configured. We have many options
to choose from, including PHP’s mail() method, sendmail, and SMTP. We could even use a
third-party e-mail service such as mailgun or postmark.
Our e-mail form is a regular HTML form with four fields: the to and from e-mail addresses,
the subject line, and the actual e-mail message. When the form is submitted, the fields are
serialized and posted to our email-send route.
The email-send route first validates all of the posted input. If there are any validation
errors, they are returned back as a string. If everything checks out, we send our values to the
Mail::send method and then send it.
Back in our e-mail-form route JavaScript, we check if email-send returned FALSE, and
if so, we display an error. If not, we need to check if the response was a number or not. If
it wasn’t a number, that means there were validation errors and we display them. If it is a
number, that means the e-mail was sent successfully, so we display a success message.

Leave a Reply

Your email address will not be published. Required fields are marked *