You can add a contact form to your theme to allow customers to get in touch with the merchant.

> Tip:
> To learn more about the merchant experience of receiving submissions, refer to [View contact form submissions](https://help.shopify.com/manual/online-store/themes/customizing-themes/add-contact-page#view-contact-form-submissions).

You can add this form with the Liquid [form tag](/docs/api/liquid/tags/form#form-contact) and accompanying `'contact'` parameter. Inside the form, you can include two different input types:

- [Required input](#required-input)
- [Optional inputs](#optional-inputs)

The following is an example of the form with both of the above input types:

```liquid

{% form 'contact' %}
  {{ form.errors | default_errors }}

  <div class="first-name">
    <label for="first-name">First name</label>
    <input type="text" name="contact[first_name]" id="first-name" />
  </div>

  <div class="last-name">
    <label for="last-name">Last name</label>
    <input type="text" name="contact[last_name]" id="last-name" />
  </div>

  <div class="phone">
    <label for="phone">Phone</label>
    <input type="tel" name="contact[phone]" id="phone" />
  </div>

  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="contact[email]" id="email" />
  </div>

  <div class="order-number">
    <label for="order-number">Order number</label>
    <input type="text" name="contact[order_number]" id="order-number" />
  </div>

  <div class="message">
    <label for="message">Message</label>
    <textarea name="contact[body]" id="message"></textarea>
  </div>

  <div class="submit">
    <input type="submit" value="Create" />
  </div>
{% endform %}

```

> Tip:
> For another example of a contact form, you can refer to [Dawn's implementation](https://github.com/Shopify/dawn/blob/main/sections/contact-form.liquid).

## Required input

The following input is required for the form to submit successfully:

<table>
  <thead>
    <tr>
      <th>Input</th>
      <th>type</th>
      <th>name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Email</td>
      <td><code>email</code></td>
      <td><code>contact[email]</code></td>
    </tr>
  </tbody>
</table>

## Optional inputs

The optional inputs can be any [HTML input type](https://developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types). They need to have an attribute of `name="contact[information_id]"`, where `information_id` briefly identifies the information that you're collecting. These titles appear in contact notifications, and must be unique within the form.

To make a specific field required for a customer, you need to add a field attribute of `required="required"` within the field's input element.

Below are examples of input types that you might want to add to your form.

### Dropdown type

```html
<div class="request-type">
  <label for="request-type">What is this regarding?</label>
  <select id="request-type" name="contact[request_type]">
    <option>Returns</option>
    <option>Shipping</option>
    <option>Custom order</option>
    <option>Other</option>
  </select>
</div>
```

### Radio type

```html
<div class="contact-method">
  <label for="contact-method">How do you want us to contact you?</label>
  <input type="radio" name="contact[contact_method]" value="email" id="email"><label for="email">Email</label><br>
  <input type="radio" name="contact[contact_method]" value="phone" id="phone"><label for="phone">Phone</label><br>
  <input type="radio" name="contact[contact_method]" value="text message" id="text"><label for="text">Text message</label>
</div>
```

### Checkbox type

To accept multiple selections, each input in a checkbox group needs to have a unique `name` value. If you don't use a unique `name` value for each input, then the form will only return the last value that was selected.

```html
<div class="contact-time">
  <label for="contact-time">When is the best time to reach you?</label>
  <input type="checkbox" name="contact[contact_time_1]" value="morning"><label for="morning">Morning</label><br>
  <input type="checkbox" name="contact[contact_time_2]" value="afternoon"><label for="afternoon">Afternoon</label><br>
  <input type="checkbox" name="contact[contact_time_3]" value="evening"><label for="evening">Evening</label>
</div>
```