Skip to main content

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.

You can add this form with the Liquid form tag and accompanying 'contact' parameter. Inside the form, you can include two different input types:

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

{% 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.

Anchor to Required inputRequired input

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

Inputtypename
Emailemailcontact[email]

Anchor to Optional inputsOptional inputs

The optional inputs can be any HTML input type. 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.

Anchor to Dropdown typeDropdown type

<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>

Anchor to Radio typeRadio type

<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>

Anchor to Checkbox typeCheckbox 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.

<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>
Was this page helpful?