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:

1. In the Templates directory, click customers/register.liquid.

2. Find the following Liquid tags in the code:

   Copy

   {% form 'create_customer' %}

   and

   Copy

   {% endform %}

3. 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.

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 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"
/>