# 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 

## [](https://github.com/cbendelow/theme_docs/blob/main/guides/themes/guides/form.md#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](https://mailtrap.io/)

### 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