How do I add a contact form to my storefront?

1. Create the file:

themes/acme/resources/forms/contact.twig

Replace acme with the name of your theme.

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

2. Add the 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>

3. Display a session success messsage:

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

Mail Notification

You can create a mail notification in the admin for the Form Submitted event (leave value empty to target all forms, or put contact to target this one specifically)

Then add this to the body of the mail notifcation, to output the submission:

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