Add fields to your contact form

To collect custom information from your customers, you can add more fields to your theme's default contact form.

Find where to add custom fields in the code

To add custom fields to your theme's contact form:

1. In the Templates directory, click page.contact.liquid.

2. Find the following Liquid tags in the code:

   Copy

   {% form 'contact' %}

   and

   Copy

   {% endform %}

3. The contact form code is between the Liquid tags that you found in the previous step. This is where the default form fields are found, with each field separated by an empty line. Every theme is different, but a contact form field looks similar to this:

   

   You will paste the code for your custom field(s) before, after, or in between the existing fields, depending on your preference. The code that you add will depend on the type of form field that you want to create.

4. After you have added the code for your custom form field(s), click Save.

Types of form fields

The following are example form fields that you can paste to your contact form template and modify to suit your needs.

Text field

To create a text field for your contact form, paste and customize the following code:

<label for="ContactFormBirthday">Birthday</label>
<input
  type="text"
  id="ContactFormBirthday"
  name="contact[Birthday]"
  placeholder="Birthday"
/>

Radio buttons

To create a set of radio buttons for your contact form, paste and customize the following code:

<label>Do you prefer tea or coffee?</label><br />
<input
  type="radio"
  id="ContactFormTea"
  name="contact[Tea or Coffee]"
  value="Tea"
/>
Tea<br />
<input
  type="radio"
  id="contactFormCoffee"
  name="contact[Tea or Coffee]"
  value="Coffee"
/>
Coffee

Drop-down menu

To create a drop-down menu for your contact form, paste and customize the following code:

<label for="ContactFormFlavor">Choose a flavor</label>
<select id="ContactFormFlavor" name="contact[Flavor]">
  <option>Chocolate</option>
  <option>Vanilla</option>
  <option>Strawberry</option>
</select>

Checkbox

To create a checkbox for your contact form, paste and customize the following code:

<label for="ContactFormKitten">Would you like a free kitten?</label><br />
<input
  type="checkbox"
  id="ContactFormKitten"
  name="contact[Kitten]"
  value="Yes, please!"
/>
Yes, please!

Customize your form fields

To customize your form fields, you will edit the code from the above examples before saving them to your contact form template.

The name attribute

It is important that <input> and <select> elements have a name attribute that is set to contact[Some Text], where Some Text identifies what question the field is looking to answer. The name attribute acts as the label for the information when the contact email is compiled and sent. The only part of the name attribute that you should edit is the text between the square brackets.

The value attribute

The value attribute is included for radio buttons and checkboxes to indicate the value of the customer's selection. You can change the wording to suit your needs.

The label element

Each type of form field has a <label> element. The label shows the title for each form field. The for attribute links a label to an associated <input> or <select> element. In some themes, the labels for form fields are hidden, and only the placeholder text is shown.

The placeholder attribute

The placeholder attribute can be applied to an <input> element. For a text field, the placeholder text is what shows in the text box by default, before a response is typed in. In some themes, the labels for form fields are hidden, and only the placeholder text is shown:

The for attribute

The for attribute links a <label> element to an <input> or <select> element that has an <id> with the same assigned value. In the following example, ContactFormBirthday is the assigned for value of the <label> element, as well as the id of the <input> element:

<label for="ContactFormBirthday">Birthday</label>
<input
  type="text"
  id="ContactFormBirthday"
  name="contact[Birthday]"
  placeholder="Birthday"
/>

The required attribute

The required attribute can be applied to an <input> element to make a field mandatory in the contact form. Customers must fill in all required fields before they can submit the contact form. In the following example, the Birthday field is specified as required:

<label for="ContactFormBirthday">Birthday *</label>
<input
  required
  type="text"
  id="ContactFormBirthday"
  name="contact[Birthday]"
  placeholder="Birthday"
/>