Add fields to the customer registration form
You can add more fields to your customer registration form to collect custom information from your customers when they sign up for an account.
Find where to add custom fields in the code
To add custom fields to your theme's customer registration form:
In the Templates directory, click
customers/register.liquid
.Find the following Liquid tags in the code:
{% form 'create_customer' %}
and
{% endform %}
The customer registration 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 customer registration 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 customer registration template and modify to suit your needs.
Text field
To create a text field for your customer registration form, paste and customize the following code:
<label for="CustomerFormAllergies">Allergies</label>
<input
type="text"
id="CustomerFormAllergies"
name="customer[note][Allergies]"
placeholder="Allergies"
/>
Radio buttons
To create a set of radio buttons for your customer registration form, paste and customize the following code:
<label>Do you prefer tea or coffee?</label><br />
<input
type="radio"
id="CustomerFormTea"
name="customer[note][Tea or Coffee]"
value="Tea"
/>
Tea<br />
<input
type="radio"
id="CustomerFormCoffee"
name="customer[note][Tea or Coffee]"
value="Coffee"
/>
Coffee
Drop-down menu
To create a drop-down menu for your customer registration form, paste and customize the following code:
<label for="CustomerFormFlavor">Choose a flavor</label>
<select id="CustomerFormFlavor" name="customer[note][Flavor]">
<option>Chocolate</option>
<option>Vanilla</option>
<option>Strawberry</option>
</select>
Checkbox
To create a checkbox for your customer registration form, paste and customize the following code:
<label for="CustomerFormKitten">Would you like a free kitten?</label><br />
<input
type="checkbox"
id="CustomerFormKitten"
name="customer[note][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 customer registration form template.
The name attribute
It is important that <input>
and <select>
elements have a name
attribute that is set to customer[note][Some Text]
, where Some Text
identifies what question the field is looking to answer. The customer[note]
value is essential, as this is what allows the information to be submitted as a customer note. Without it, nothing will be submitted. The only part of the name
attribute that you should edit is the text between the second set of 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, CustomerFormAllergies
is the assigned for
value of the <label>
element, as well as the id
of the <input>
element:
<label for="CustomerFormAllergies">Allergies</label>
<input
type="text"
id="CustomerFormAllergies"
name="customer[note][Allergies]"
placeholder="Allergies"
/>