---
title: Add a contact form to your theme
description: Learn how to create a contact form, and add custom fields.
source_url:
  html: https://shopify.dev/docs/storefronts/themes/customer-engagement/add-contact-form
  md: https://shopify.dev/docs/storefronts/themes/customer-engagement/add-contact-form.md
---

ExpandOn this page

* [Required input](https://shopify.dev/docs/storefronts/themes/customer-engagement/add-contact-form#required-input)
* [Optional inputs](https://shopify.dev/docs/storefronts/themes/customer-engagement/add-contact-form#optional-inputs)

# Add a contact form to your theme

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](https://shopify.dev/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 className="first-name">
    <label htmlFor="first-name">First name</label>
    <input type="text" name="contact[first_name]" id="first-name" />
  </div>


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


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


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


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


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


  <div className="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:

| Input | type | name |
| - | - | - |
| Email | `email` | `contact[email]` |

***

## 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 className="request-type">
  <label htmlFor="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 className="contact-method">
  <label htmlFor="contact-method">How do you want us to contact you?</label>
  <input type="radio" name="contact[contact_method]" value="email" id="email" /><label htmlFor="email">Email</label><br />
  <input type="radio" name="contact[contact_method]" value="phone" id="phone" /><label htmlFor="phone">Phone</label><br />
  <input type="radio" name="contact[contact_method]" value="text message" id="text" /><label htmlFor="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 className="contact-time">
  <label htmlFor="contact-time">When is the best time to reach you?</label>
  <input type="checkbox" name="contact[contact_time_1]" value="morning" /><label htmlFor="morning">Morning</label><br />
  <input type="checkbox" name="contact[contact_time_2]" value="afternoon" /><label htmlFor="afternoon">Afternoon</label><br />
  <input type="checkbox" name="contact[contact_time_3]" value="evening" /><label htmlFor="evening">Evening</label>
</div>
```

***

* [Required input](https://shopify.dev/docs/storefronts/themes/customer-engagement/add-contact-form#required-input)
* [Optional inputs](https://shopify.dev/docs/storefronts/themes/customer-engagement/add-contact-form#optional-inputs)