how to add custom field in customer registration page in shopify?

Question

I have added a Custom field in the customer registration page.

Fieldname: Area.

I have tried to save them, all details are saved expect but the Area value not saved.

Can anyone help me to fix that issue?

{% form 'create_customer' %}

    {{ form.errors | default_errors }}

    <label for="FirstName" class="hidden-label">{{ 'customer.register.first_name' | t }}</label>
    <input type="text" name="customer[first_name]" id="FirstName" class="input-full" placeholder="{{ 'customer.register.first_name' | t }}" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocapitalize="words" autofocus required>

    <label for="LastName" class="hidden-label">{{ 'customer.register.last_name' | t }}</label>
    <input type="text" name="customer[last_name]" id="LastName" class="input-full" placeholder="{{ 'customer.register.last_name' | t }}" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocapitalize="words" required>

    <label for="Email" class="hidden-label">{{ 'customer.register.email' | t }}</label>
    <input type="email" name="customer[email]" id="Email" class="input-full{% if form.errors contains 'email' %} error{% endif %}" placeholder="{{ 'customer.register.email' | t }}" {% if form.email %} value="{{ form.email }}"{% endif %} autocorrect="off" autocapitalize="off" required>

  <label for="Area" class="hidden-label">{{ 'customer.register.area' | t }}</label>

  <input type="text" id="Area" name="customer[note][area]" placeholder="Customer Area" class="input-full"  autocorrect="off" autocapitalize="off">

    <label for="CreatePassword" class="hidden-label">{{ 'customer.register.password' | t }}</label>
    <input type="password" name="customer[password]" id="CreatePassword" class="input-full{% if form.errors contains 'password' %} error{% endif %}" placeholder="{{ 'customer.register.password' | t }}" required>

    <p>
      <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn btn--full registerBtn" ng-click="myfunction();" id="create">
    </p>
    <a href="{{ shop.url }}">{{ 'customer.register.cancel' | t }}</a>

  {% endform %}
</div>

Can you provide more information here? You are asking how to add a custom field to your form but the pasted code doesn't have a single field, only translatable strings. — drip
Hi, thanks for your response, here I am added my code for creating the customer registration. In this code, I have just added Area, my custom field. I don't know how to store and display the Area name of the customer. — Sakthivel

drip drip · Accepted Answer · 2019-05-31T13:15:50

There is no way to show a note field in the front end but you should be able to store it the way you are saving it.

If you like to output something you will have to use a tag instead.

For example: <input type="text" class="field" name="customer[tags]" value="" >

And you will have access to the tags from customer.tags. That way you will be able to show the tag/field.

how to add custom field in customer registration page in shopify?

1 Answers