How do I add a contact form to my storefront?

Introduction

Forms Location

your_theme_name>resources>views>forms

Any files created inside this directory can be included on a page using {% form "contact" %}

Create a Contact Form

Create your form in the forms location, for example contact.twig:

<form action="{{ route('form', 'contact') }}" method="post">
    {{ csrf_field() }}
    <div>
        <label for="name">Name:</label>
        <input id="name" type="text" name="name" autocomplete="name" required placeholder="First Name" value="{{ old('name') }}">
    </div>
    <div>
        <label for="name">Email Address:</label>
        <input id="email" type="text" name="email" autocomplete="email" required placeholder="Email Address" value="{{ old('email') }}">
    </div>
    <div>
        <label for="name">Your Message</label>
        <textarea id="message" type="text" name="message" autocomplete="off" required placeholder="Your message">{{ old('message') }}</textarea>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

Session message

{% if session('success') %}
    <div role="alert">
        <span>Your message has been sent.</span>
    </div>
{% endif %}

Redirect to success page (optional)

Add the following to your project in app>providers>AppServiceProvider.php

public function boot()
{
    \Aero\Store\Http\Responses\FormSubmit::extend(function ($builder) {
        if ($builder->form === 'contact') {
            $builder->setRedirect('/success');
        }
    });
}

Create success page

1. Log in to the admin and navigate to /admin/content/pages
2. Create new page
   1. Set page name to success
   2. Add your content

Mail notification

1. Log in to the admin and navigate to /admin/configuration/mail
2. Create new mail
   1. Set label to a name of your choice
   2. Select "System" layout
   3. Add the email address of the recipient
   4. Select "Form Submitted" from the event list
      1. Set this to match your route, in our case contact
   5. Continue to the next step
3. Configure your email
   1. Set the subject to the subject of your email
   2. Input the snippet of code that will be outputted in the body of your email (see example below)
4. Save

{% for field, value in fields %}
    <p>{{ field }}: {{ value }}</p>
{% endfor %}

Test your email

You'll need to set up a mail server for example when testing locally you could use Mailtrap

Include your form on a contact page

1. Log in to the admin and navigate to /admin/content/pages
2. Create a new page
   1. Set the name to what you'd like the title of your page to be
   2. In the content area add {% form "contact" %} where you'd like the form to display.
3. Save