From Shopify Wiki

Introduction

There are two types of forms:

• Contact: sends an email with all the fields provided in the form to your shop's "Customer email" (specified on General Settings).

This is a general contact form that can be used to ask for feedback, receive questions, etc.

• Signup: registers a customer's email address with the shop for newsletters or product notifications.

This form creates a customer for your shop based on the provided email address. The email field is mandatory. When you build the form, you can optionally specify tags that will be associated with the customer.

Contact Forms

You can use the Liquid 'form' tag to add contact forms to your Shopify store. The liquid code for generating the forms can be used in any of your liquid templates using the Template Editor. This form will send out an email to your shop's email address when submitted.

Contact Form: The contact form begins by using:

{% form 'contact' %}
 ... form goes here ...
{% endform %}

You can then use HTML to specify any fields you'd like within the form. NOTE: Only fields within the form that are in the 'contact' group will be submitted. In the example below, if an input field did not have a name such as "contact[your_field_name]", it would not be submitted by email.

{% form 'contact' %}
  <table>
    <tr>
      <td>Questions? Comments?:</td>
      <td>
        <input type="text" id="contact_comments" name="contact[comments]"/>
      </td>
    </tr>
    <tr>
      <td colspan="2"><input type='submit' class="submit" /></td>
    </tr>
  </table>
{% endform %}

Signup Forms

You can use the Liquid 'form' tag to add signup forms to your Shopify store. This is useful for having your customers sign up for newsletters or product stock update notifications. The liquid code for generating the forms can be used in any of your liquid templates using the Template Editor. This form will create a customer (with optional tags) on submit.

Customer Form: The customer form begins by using:

{% form 'customer' %}
 ... form goes here ...
{% endform %}

An email field is mandatory, while a tags field is optional. If you do specify the tags field, you can add comma-separated tags which will be added to the customer on creation. If the customer email already exists, the customer tags will simply be updated.

{% form 'customer' %}
  <input type="hidden" id="contact_tags" name="contact[tags]" value="prospect,newsletter"/>
  <table>
    <tr>
      <td>Enter in your email to join our mailing list:</td>
      <td>
        <input type="text" id="contact_email" name="contact[email]"/>
      </td>
    </tr>
    <tr>
      <td colspan="2"><input type='submit' class="submit" /></td>
    </tr>
  </table>
{% endform %}

Success? Error?

Once a form is submitted by a user, they're redirected back to the same page the form was on. Here, you can display if the form was successfully submitted, or if there were any errors. Similar to article.liquid, you can check if the form was posted successfully by checking form.posted_successfully?

{% if form.posted_successfully? %}
  Thank you for contacting us! We'll get back to you shortly with an answer!
{% endif %}

If there are errors, they can be accessed using form.errors. The code below would display "email can't be blank" if a customer form was submitted without an email address.

{% if form.errors %}
  {% for field in form.errors %}
    {{ field }} - {{ form.errors.messages[field] }}
  {% endfor %}
{% endif %}

Full-Blown Example

Create a new Page with 'Contact Us' as the title. This will generate the handle of the page as 'contact-us'. In our example, we modify page.liquid in the Template Editor to only show the form if we're on the Contact Us page.

{{ page.content }}

{% if page.handle == 'contact-us' %}
  {% form 'contact' %}
    {% if form.posted_successfully? %}
      Thanks for contacting us! We'll get back to you as soon as possible.
    {% endif %}
    
    {% if form.errors %}
      {% for field in form.errors %}
        {{ field }} - {{ form.errors.messages[field] }}
      {% endfor %}
    {% endif %}

    <table>
      <tr>
        <td>Email:</td>
        <td><input type="text" id="contact_email" name="contact[email]"/></td>
      </tr>
      <tr>
        <td>Question:</td>
        <td>
          <textarea id="contact_question" name="contact[question]"></textarea>
        </td>
      </tr>
      <tr>
        <td colspan="2"><input type='submit' class="submit" /></td>
      </tr>
    </table>
  {% endform %}
{% endif %}