jcadima
8/7/2018 - 10:00 PM

Laravel send ajax email

<?php

1) Route:
Route::post('contact/send', array('uses' => 'Front\\ContactFormController@sendEmail') )->name('send.email');

2) ContactFormController :

namespace App\Http\Controllers\Front;

use Mail;
use Illuminate\Http\Request;
use App\Mail\ContactForm;
use App\Http\Controllers\Controller;

class ContactFormController extends Controller
{
    
    public function sendEmail( Request $request ) {
        // dd( $request->all() ) ;
        // To DB (optional)
        // ...

        Mail::to('juan@up3.com')->send(new ContactForm( $request->name, $request->email, $request->content ) ) ;

        if( count( Mail::failures() ) > 0 )
            $status = 'error';
        else 
            $status = 'success';
        
        return response()->json(['response' => $status]);
    }
}

    
    
3) create a Mailable class and its corresponding email template:
php artisan  make:mail ContactForm --markdown=emails.contact

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Queue\ShouldQueue;

class ContactForm extends Mailable
{
    use Queueable, SerializesModels;

    public $name = '' ;
    public $email = '' ;
    public $content = '' ;

    public function __construct( $name, $email, $content)
    {
        $this->name = $name;
        $this->email = $email;
        $this->content = $content; 
    }


    public function build()
    {
        return $this->subject('New Contact Form Submission')
                    ->markdown('emails.contact');
    }
}


4) This is the email template for the above Mailable: 

@component('mail::message')
# Form Submission:
Name: {{ $name }} <br>
Email: {{ $email }} <br>
Message: <br>
{!! nl2br(e($content))  !!} <br>


Thanks,<br>
{{ config('app.name') }}
@endcomponent



5) THE JS for the cta:
<script>

$('#cta').submit( function(e) {
    console.log('Submit via ajax') ;
    e.preventDefault() ;

    $.ajax({
        type: 'post',
        url: '{{ route('send.email') }}',
        data: {
            'name':    $('#name').val(),
            'email':   $('#email').val(),
            'content': $('#content').val()
        },
        success: function(data) {
            if ((data.errors)) {
                console.log("Error Submitting Email") ;
               // toastr.success("{{ Session::get('error') }}") 
                $('.error').removeClass('hidden');
                $('.error').text(data.errors.name);
            } else {
                console.log('Email Successfully Sent') ;
             //   toastr.success("{{ Session::get('success') }}") 
                $('.error').remove();  
            }
        },
    });

});

</script>



6) Disable csfr for this route: App/Http/Middleware/VerifyCsrfToken.php

    protected $except = [
        'contact/send'
    ];