Contact and newsletter forms

Contact form

{%- form 'contact', id: 'ContactForm' -%}
  {%- if form.posted_successfully? -%}
    <p class="form-success" role="status">{{ 'contact.form.post_success' | t }}</p>
  {%- endif -%}
  {%- if form.errors -%}
    <p class="form-error" role="alert">{{ 'contact.form.error' | t }}</p>
  {%- endif -%}
  <label for="ContactName">{{ 'contact.form.name' | t }}</label>
  <input id="ContactName" name="contact[name]" autocomplete="name">
  <label for="ContactEmail">{{ 'contact.form.email' | t }}</label>
  <input id="ContactEmail" type="email" name="contact[email]" autocomplete="email" required>
  <label for="ContactPhone">{{ 'contact.form.phone' | t }}</label>
  <input id="ContactPhone" type="tel" name="contact[phone]" autocomplete="tel" dir="ltr">
  <label for="ContactOrder">{{ 'contact.form.order_number' | t }}</label>
  <input id="ContactOrder" name="contact[order_number]">
  <label for="ContactBody">{{ 'contact.form.message' | t }}</label>
  <textarea id="ContactBody" name="contact[body]" rows="5"></textarea>
  <button>{{ 'contact.form.send' | t }}</button>
{%- endform -%}

The message is saved under Messages in admin and emailed to the store. contact[name], contact[email], contact[phone] and contact[body] are the standard fields; any other contact[…] field is kept with the message. After sending, the shopper comes back to the same page with form.posted_successfully? true.

Spam protection is built in: a hidden field bots fill in is added for you, and each visitor can send a few messages a minute.

Newsletter sign-up

{%- form 'customer', id: 'Newsletter' -%}
  <input type="hidden" name="contact[tags]" value="newsletter">
  {%- if form.posted_successfully? -%}
    <p role="status">{{ 'newsletter.success' | t }}</p>
  {%- else -%}
    <label for="NewsletterEmail" class="visually-hidden">{{ 'newsletter.label' | t }}</label>
    <input id="NewsletterEmail" type="email" name="contact[email]" autocomplete="email" required dir="ltr">
    <button>{{ 'newsletter.button' | t }}</button>
  {%- endif -%}
{%- endform -%}

The email becomes a customer who accepts marketing, tagged with contact[tags] (comma-separated). {% form 'newsletter' %} works the same.

Several forms on one page

Give each form its own id. form.posted_successfully? is true only in forms of the type that was sent, so a footer sign-up doesn’t show “thanks” after a contact message.