# Contact

• A contact form is a very common element on every website

# Refactor routes

• At the moment, our contact page only contains some static text
• First, we refactor it using a controller
  • Run the command: php artisan make:controller ContactUsController
• Open app/Http/Controllers/ContactUsController.php and add two methods
  • The method show() shows the contact form
  • The method sendEmail() sends a confirmation mail (with the content of the submitted form) to the user, with a carbon copy to The Vinyl Shop administration
    • For now, this method only redirects (GET request!) to the 'contact-us' route, and thus, shows the form again

class ContactUsController extends Controller
{
    // Show the contact form
    public function show()
    {
        return view('contact');
    }

    // Send email
    public function sendEmail(Request $request)
    {
        // Validate form

        // Send email

        // Redirect to the contact-us link ( NOT to view('contact')!!! )
        return redirect('contact-us');
    }
}

• We also provide two (new) 'contact-us' routes
  • A GET route for showing the contact form
  • A POST route for sending the email
• Open routes/web.php and replace

Route::view('contact-us', 'contact');

with

Route::get('contact-us', 'ContactUsController@show');
Route::post('contact-us', 'ContactUsController@sendEmail');

# Contact form

• Open resources/views/contact.blade.php and add a contact form with client side validation to the page

@section('main')
    <h1>Contact us</h1>
    <form action="/contact-us" method="post">
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" name="name" id="name" 
                   class="form-control"
                   placeholder="Your name"
                   required
                   value="">
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" 
                   class="form-control"
                   placeholder="Your email"
                   required
                   value="">
        </div>
        <div class="form-group">
            <label for="message">Message</label>
            <textarea name="message" id="message" rows="5" 
                      class="form-control"
                      placeholder="Your message"
                      required
                      minlength="10"></textarea>
        </div>
        <button type="submit" class="btn btn-success">Send Message</button>
    </form>
@endsection

# CSRF protection

• If you test/submit the form, you get a 419 | Page Expired error, because Laravel automatically protects your application from cross-site request forgery (CSRF) attacks
  • Laravel generates a "token" for each active user session
  • When you submit a form (with a POST request), Laravel checks whether this token corresponds to the mandatory token of the form

• Add a CSRF token to the form using the @csrf Blade directive, which injects a hidden field (check the source code in the browser)

<form action="/contact-us" method="post">
    @csrf
    ...
</form>

# Remember the filled-in values

• After submitting the form (nothing happens at this moment), you'll be redirected to the form page, but the filled-in form values are gone
• We cannot use the request() helper function to retrieve these filled-in form values from the current request (as we did for the search form in Shop: master page), because we are redirected (a new GET request!) to the 'contact-us' route at the end of the sendMail() method
• The flash() method will flash the (current) input to the session so that it is available during the user's next request
  • Add $request->flash() just before the redirect

class ContactUsController extends Controller
{
    //Show the contact form
    public function show() { ... }
        
    // Send email
    public function sendEmail(Request $request)
    {
        // Validate form

        // Send email

        // Flash filled-in form values to the session
        $request->flash();
        // Redirect to the contact-us link ( NOT to view('contact')!!! )
        return redirect('contact-us');
    }
}

• Update the form values to their previous state using Laravel's helper function old()

@section('main')
    <h1>Contact us</h1>
    <form action="/contact-us" method="post">
        @csrf
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" name="name" id="name" 
                   class="form-control"
                   placeholder="Your name"
                   required
                   value="{{ old('name') }}">
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" name="email" id="email" 
                   class="form-control"
                   placeholder="Your email"
                   required
                   value="{{ old('email') }}">
        </div>
        <div class="form-group">
            <label for="message">Message</label>
            <textarea name="message" id="message" rows="5" 
                      class="form-control"
                      placeholder="Your message"
                      required
                      minlength="10">{{ old('message') }}</textarea>
        </div>
        <button type="submit" class="btn btn-success">Send Message</button>
    </form>
@endsection

• Resubmit the form (to witness that the filled-in values are now restored)

{{ old('name', 'Demo') }}
{{ old('email', 'demo@example.com') }}
{{ old('message', "New message\nLorem ipsum") }}

# Send feedback to the user

• After submitting the form, we'll send some feedback to the user
• In analogy with sending the filled-in form values to the session, we use the flash() method to send some feedback

# Flash a session variable 'success'

• Add an extra line of code to send ("flash") the session variable 'success' to the next request

public function sendEmail(Request $request)
{
    ...
    // Flash filled-in form values to the session
    $request->flash();
    // Flash a success message to the session
    session()->flash('success', 'Thank you for your message.<br>We\'ll contact you as soon as possible.');
    // Redirect to the contact-us link ( NOT to view('contact')!!! )
    return redirect('contact-us');
}

session()->flash('success', 'Thank you ...');
return redirect('contact-us');

return redirect('contact-us')->with('success', 'Thank you ...');

# Show session variable 'success' in the view

• Add a Bootstrap alert to the view
  • Line 2: show the alert if the session has a variable 'success'
  • Line 7: get the value of the session variable 'success' and show it inside the alert

<h1>Contact us</h1>
@if (session()->has('success'))
    <div class="alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        <p>{!! session()->get('success') !!}</p>
    </div>
@endif

# Hide form

• If the form is correctly submitted (and the success alert is shown), there is no need to show the (completed) form (again)
• Therefore, show the form (only) if the session has NO variable 'success'

<h1>Contact us</h1>
@if (session()->has('success'))
    <div class="alert alert-success alert-dismissable">
        ...
    </div>
@endif
@if (!session()->has('success'))
    <form action="/contact-us" method="post">
        ...
    </form>
@endif

# Refactor the flash message for re-use

• We'll use the flash() method more than once inside this application to show a success alert, so it's advisable to move the code to a new (shared) file resources/views/shared/alert.blade.php
• Add an extra alert with an alert-danger class that will be shown when there is a session variable 'danger'

{{-- session key = success --}}
@if (session()->has('success'))
    <div class="alert alert-success alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        <p>{!! session()->get('success') !!}</p>
    </div>
@endif

{{-- session key = danger --}}
@if (session()->has('danger'))
    <div class="alert alert-danger alert-dismissable">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">×</span>
        </button>
        <p>{!! session()->get('danger') !!}</p>
    </div>
@endif

• Include the file alert.blade.php inside the view

<h1>Contact us</h1>
@include('shared.alert')
@if (!session()->has('success'))
    <form action="/contact-us" method="post">
        ...
    </form>
@endif

# Form validation

• At this point, our form has only some basic client side validation that comes with HTML5
  • All form input fields are required and the message must be at least 10 characters long

• To check the server side validation, we temporarily disable the client side validation by adding the novalidate attribute to the form tag

<form action="/contact-us" method="post" novalidate>
    ...
</form>

# Validation logic inside the controller

• If you need some validation inside the controller, the method validate() always comes first inside the method
• If the validation fails, the user will automatically be redirected to the previous page
  • A global variable $errors is sent (with the redirect)
  • Also the old values are automatically sent with the redirect, so the $request->flash() statement can be removed
• Add some validation rules to the page
  • List of available validation rules
  • If the validation succeeds, the rest of the code in the sendMail() method is executed

public function sendEmail(Request $request)
{
    // Validate form
    $this->validate($request,[
        'name' => 'required',
        'email' => 'required|email',
        'message' => 'required|min:10'
    ]);
    ...
}

# Display all validation errors

• The statement $errors->all() returns all error messages as an array of strings

["The name field is required.","The email must be a valid email address.", 
 "The message must be at least 10 characters."]

• To display all errors (in an alert) on the view, you have to loop over this array
  • First, check whether there are any errors using the statement $errors->any()

<h1>Contact us</h1>
@include('shared.alert')
@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

# Display validation errors individually

• The statement $errors->first('name') returns the first error message for the input field 'name' as a string

"The name field is required."

• Add the individual errors on the form input fields (resulting in more sophisticated feedback)
  • Remove the global validation error block
  • Add a class is-invalid to each input field with an error
  • Add a div with class invalid-feedback right after every input field

<form action="/contact-us" method="post" novalidate>
    @csrf
    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" id="name" 
               class="form-control {{ $errors->first('name') ? 'is-invalid' : '' }}"
               placeholder="Your name"
               required
               value="{{ old('name') }}">
        <div class="invalid-feedback">{{ $errors->first('name') }}</div>
    </div>
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" name="email" id="email" 
               class="form-control {{ $errors->first('email') ? 'is-invalid' : '' }}"
               placeholder="Your email"
               required
               value="{{ old('email') }}">
        <div class="invalid-feedback">{{ $errors->first('email') }}</div>
    </div>
    <div class="form-group">
        <label for="message">Message</label>
        <textarea name="message" id="message" rows="5" 
                  class="form-control {{ $errors->first('message') ? 'is-invalid' : '' }}"
                  required
                  minlength="10">{{ old('message') }}</textarea>
        <div class="invalid-feedback">{{ $errors->first('message') }}</div>
    </div>
    <button type="submit" class="btn btn-success">Send Message</button>
</form>

# Sending email

• After configuring our mail settings, we set up a mail template, pass some data to this template and send the mail itself

# Configure mail settings

• Configure the .env file to send emails within the application through mailtrap.io, as described in Config -> .env file -> MAIL_...

# Create mailable

• In Laravel, each type of email sent by your application is represented as a mailable class
• To create a new Markdown mailable class ContactMail with a Markdown Blade template email/contact.blade.php, use the command php artisan make:mail ContactMail --markdown email.contact
  • The corresponding file ContactMail.php with the mailable class definition is stored in the app/Mail folder
  • Besides a Markdown-based mail template (used in this site), you can also opt for HTML or text-based templates for the mail
• Send an email via the controller
  • Make a new instance $email of the ContactMail mailable class
  • Add the recipient using the to() method (on the Mail facade)
    • If you supply an object (in our case $request) which contains email (and name) properties, these will be automatically used
  • Send the mail using the send() method with $email as parameter

public function sendEmail(Request $request)
{
    // Validate form
    ...

    // Send email
    $email = new ContactMail();
    Mail::to($request) // or Mail::to($request->email, $request->name)
        ->send($email);
    
    // Flash a success message to the session
    session()->flash('success', 'Thanks for you message.<br>We\'ll contact you as soon as possible.');
    // Redirect to the contact-us link ( NOT to view('contact')!!! )
    return redirect('contact-us');
}

• Submit a form and check if the mail is in your Mailtrap inbox
  • For now, a default mail with the from address from@example.com (as specified in the .env file) and some fixed text is sent as we still have to send the real data to the mail body

# Inject the data to the mailable

• Pass the validated form data (i.e., the object $request) to the mailable

$email = new ContactMail($request);

• Open the mailable app/Mail/ContactMail.php
• Make a new public property (e.g. $request)
• Get the validated form data through the constructor and bind it to the $request property
  • As this $request property is public, it will be available in the mail template
• Inside the build() method
  • The path to the mail template is used as a parameter of the markdown() method
  • Add the from and carbon copy addresses and a subject to the mailable using the from(), cc() and subject() methods

class ContactMail extends Mailable
{
    use Queueable, SerializesModels;

    public $request;

    /** Create a new message instance. ...*/
    public function __construct($request)
    {
        $this->request = $request;
    }

    /** Build the message. ...*/
    public function build()
    {
        return $this->from('info@thevinylshop.com', 'The Vinyl Shop - Info')
            ->cc('info@thevinylshop.com', 'The Vinyl Shop - Info')
            ->subject('The Vinyl Shop - Contact Form')
            ->markdown('email.contact');
    }
}

# Update the mail template

• Make the following changes in the .env file (as these variables are used in the header/footer and signature in the mail template)
  • change the APP_NAME to "The Vinyl Shop" (with quotes!)
  • change APP_URL to http://localhost:3000

APP_NAME="The Vinyl Shop"
APP_URL=http://localhost:3000

• Open resources/views/email/contact.blade.php and update the template

@component('mail::message')
# Dear {{ $request->name }},
Thanks for you message.<br>
We'll contact you as soon as possible.

<hr>
<b>Your name:</b> {{ $request->name }}<br>
<b>Your email:</b> {{ $request->email }}<br>
<b>Your message:</b><br>{{ $request->message }}

Thanks,<br>
{{ env('APP_NAME') }}
@endcomponent

@component('mail::message')
    # Dear {{ $request->name }},
    Thanks for you message.<br>
    We'll contact you as soon as possible.
    ...
@endcomponent

# Extra features

• Check Laravel's mail documentation to discover extra mail features (e.g. add attachments, change the default mailable template (@component('mail::message')), use a HTML-based or plain text mail template, ...)

# Better UX

• To inform the user that a form input field is required, we put a red asterisk after the corresponding label
• Because we want to do this for all forms in the site, it's best to use JavaScript for it
  • Open resources/js/vinylshop.js and add the following code to the page

$(function(){
    $('input[required], select[required], textarea[required]').each(function () {
        $(this).closest('.form-group')
               .find('label')
               .append('<sup class="text-danger mx-1">*</sup>');
    });
});

# EXERCISE 1: Add a contact field to the form

• Add a dropdown list to the form in order to choose a specific contact
• The list contains four options: Select a contact (value=""), Info, Billing and Support
• This is a required field, so add it to your validation

• Depending on the choice of the user, the from (and carbon copy) address equals info@thevinylshop.com, billing@thevinylshop.com or support@thevinylshop.com. Also the names corresponding to these addresses ('The Vinyl Shop - Info', 'The Vinyl Shop - Billing', 'The Vinyl Shop - Support') should be adjusted.

# EXERCISE 2: Hide the dismiss button on the alert

• The dismiss button 'x' at the top right of the (success) alert is irrelevant for this page

• Write some embedded CSS on this page to automatically hide this dismiss button

# Global novalidate

• Don't forget to remove the novalidate attribute from the form tag for production!
• A better option is to add the novalidate attribute automatically to the form tag, but only in debug mode
  • Add, after @yield('script_after'), a new script to resources/views/layouts/template.blade.php
  • If the variable APP_DEBUG in the .env file is true, then add the attribute novalidate to every form tag in the site

@include('shared.footer')
<script src="{{ mix('js/app.js') }}"></script>
@yield('script_after')
@if(env('APP_DEBUG'))
    <script>
        $('form').attr('novalidate', 'true');
    </script>
@endif