Add fields to your contact form

So you’ve set up your new template and everything’s rocking and rolling, but you soon realize you’ll need a bit more information from your customers. In this tutorial you’ll learn how to add fields to the Shopify Liquid contact form.

There is just one thing to keep in mind when adding fields to a Liquid contact form: the name attribute.

The name attribute

This is going to act as the label for the information when the email is compiled and sent. The name of an input field in a liquid contact form will always look like this:


The only thing we’ll change is what goes between the square brackets. So, if we want the label in the email to be Hair Color we’ll input that between the brackets. It’ll look like this:

name="contact[hair color]"

It’s worth noting that the first letter of each word between the square brackets will be capitalized. So for example, an input using name="contact[fuzzy kittens]" will be labeled “Fuzzy Kittens”.

Forms using contact[email] and contact[body] will be validated. If either is blank, an error will be flagged and the form won’t be submitted. Contact[body] will also be checked over by Shopify’s spam filters.

Putting it all together

Let’s see how a basic text input field will look when we’ve put this all together:

<input type="text" name="contact[hair color]"  />

You can add a placeholder too if you’d like. That’d look like this:

<input type="text" name="contact[hair color]" placeholder="Blond" />

Types of input fields

Well, we’ve worked out our basic text input field. Fantastic! But what if we want checkboxes, or radio buttons, or dropdowns? No sweat! Just keep in mind what we learned about names. Here are some examples:

Dropdown Select:

<label>Type of question:</label>
  <select id="contactFormQuestionType" name="contact[question type]">

Radio Buttons:

  <input type="radio" id="contactFormSexMale" name="contact[sex]" value="Male" />Male<br>
  <input type="radio" id="contactFormSexFemale" name="contact[sex]" value="Female" />Female


<label>Would you like additional information on kittens?</label>
   <input type="checkbox" id="contactFormAddInfo" name="contact[Yes Please]" value="Yes Please" />Yes Please!


The information relating to the checkbox will only be sent if the checkbox is checked. If the checkbox is left unselected no information will be relayed in the contact form.

Where it goes

So we’ve got our code, now where does it go? Look for this line of code:

<div id="contactFormWrapper">

Then place your new input field where you’d like it to appear on the form. Just be sure not to place it within other existing blocks of code:

Edit page contact liq

Want to discuss this page?

Visit the Shopify Community