[{"value":"JavaScript Function","id":"javascript-function","hLevel":2,"level":1},{"value":"Required Inputs","id":"required-inputs","hLevel":2,"level":1},{"value":"Optional Inputs","id":"optional-inputs","hLevel":2,"level":1,"children":[{"value":"Dropdown Type","id":"dropdown-type","hLevel":3,"level":2},{"value":"Radio Button Type","id":"radio-button-type","hLevel":3,"level":2},{"value":"Checkbox Type","id":"checkbox-type","hLevel":3,"level":2}]}]

Adding a Contact Form to Your Theme

You can include a contact form in your theme to allow customers to get in touch with you.

You can use the Handlebars form helper with the 'contact' parameter to add this form. In the form, you can include two types of inputs:

Required Inputs
Optional Inputs

Here is an example of a form with both types of inputs:

{{#form 'contact' id="ContactForm" class="contact-form"}}
  {{#if form.posted_successfully}}
    <div>Submission successful</div>
  {{/if}}
  {{#if form.errors}}
    <div>{{ form.errors.messages }}</div>
  {{/if}}
  <div class="contact__fields">
    <div class="field">
      <label for="ContactForm-email">{{ t 'templates.contact.form.email.value' }}</label>
      <input type="email" id="ContactForm-email" name="contact[email]" title="{{ t 'templates.contact.form.email.value' }}" placeholder="{{ t 'templates.contact.form.email.placeholder' }}">
    </div>
    <div class="field">
      <label for="ContactForm-birthday">{{ t 'templates.contact.form.birthday.value' }}</label>
      <input type="date" id="ContactForm-birthday" name="attribute[birthday]" title="{{ t 'templates.contact.form.birthday.value' }}" placeholder="{{ t 'templates.contact.form.birthday.placeholder' }}">
    </div>
    <div>
      <input class="contact__button" type="submit" value="{{ t 'templates.contact.form.submit' }}">
    </div>
  </div>
{{/form}}

Note

Translation fields need to be output to the title attribute and used with a JavaScript function to submit the form.

JavaScript Function

document.querySelector('.contact__button').addEventListener('click', (e) => {
  const form = document.querySelector('#ContactForm')
  const inputs = form.querySelectorAll('input')
  const translateInput = form.querySelector('input[name=_translate]')
  const translate = {}
  for (let i = 0; i < inputs.length; i++) {
    const input = inputs[i]
    const title = input.getAttribute('title')
    const name = input.getAttribute('name')
    if (/contact|attribute\[[\w]+\]/.test(name)) {
      translate[name] = title
    }
  }
  translateInput.setAttribute('value', JSON.stringify(translate))
})

Note

For another example of a contact form, refer to Seed's implementation.

Required Inputs

To successfully submit the form, the following input is required:

Input	Type	Field Name
email	`email`	`contact[email]`

Optional Inputs

Optional inputs can be any HTML input type. They need to have an attribute name="attribute[information_id]", where information_id briefly identifies the information you are collecting. These labels appear in contact notifications and must be unique in the form.

To require specific fields, add the attribute required="required" to the input element.

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

<div class="form-item__type">
  <label for="request-type">What is this about?</label>
  <select id="request-type" name="attribute[request_type]" title="{{ t 'contact.request_type' }}">
    <option>Shipping</option>
    <option>Returns</option>
    <option>Custom order</option>
    <option>Other</option>
  </select>
</div>

Radio Button Type

<div class="form-item__method">
  <label for="contact-method">How would you prefer us to contact you?</label>
  <input type="radio" name="attribute[contact_method]" value="email" id="email" title="{{ t 'contact.contact_method.email' }}"><label for="email">Email</label><br>
  <input type="radio" name="attribute[contact_method]" value="phone" id="phone" title="{{ t 'contact.contact_method.phone' }}"><label for="phone">Phone</label><br>
  <input type="radio" name="attribute[contact_method]" value="text message" id="text" title="{{ t 'contact.contact_method.message' }}"><label for="text">Message</label>
</div>

Checkbox Type

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

<div class="form-item__time">
  <label for="contact-time">When would be the most convenient time for us to contact you?</label>
  <input type="checkbox" name="attribute[contact_time_1]" value="morning" title="{{ t 'contact.contact_time_1.contact_time_1' }}"><label for="morning">Morning</label><br>
  <input type="checkbox" name="attribute[contact_time_2]" value="afternoon" title="{{ t 'contact.contact_time_2.contact_time_2' }}"><label for="afternoon">Afternoon</label><br>
  <input type="checkbox" name="attribute[contact_time_3]" value="evening" title="{{ t 'contact.contact_time_3.contact_time_3' }}"><label for="evening">Evening</label>
</div>