Add fields to your contact form
So you’ve set up your new page.contact.liquid 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:
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:
<label>Type of question:</label> <select id="contactFormQuestionType" name="contact[question type]"> <option>Silly</option> <option>Serious</option> </select>
<label>Gender</label> <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:
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: