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:
In the Templates directory, click
page.contact.liquid
.Find the following Liquid tags in the code:
{% form 'contact' %}
and
{% endform %}
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.
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"
/>