Registration form. Full name instead of First/Last name

Shopify Partner
5 0 4

Hi,

Is it possible to create full name input instead of 2 inputs First/Last name? Or can I remove `First name` and use `Last name` like `Full name`? 

What are the consequences of this and what these changes will affect?

Any help would be appreciated, thanks!

Shopify Partner
12421 1505 4494

Hello, @Anna__ 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Shopify Partner
5 0 4

Hi  @KetanKumar ,

Thanks for your response!

I don't have an online store, let's look at the Debut theme customers/register-from.liquid .

We have 2 inputs - customer[first_name] and customer[last_name]

<label for="{{ formId }}-FirstName">{{ 'customer.register.first_name' | t }}</label>
<input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name">

<label for="{{ formId }}-LastName">{{ 'customer.register.last_name' | t }}</label>
<input type="text" name="customer[last_name]" id="{{ formId }}-LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocomplete="family-name">

 

Do we have any solution to join this into 1 input? I suppose it may affect email marketing, it will require some changes in the user account, also it will not be displayed in the admin dashboard (Customers). I just want to find a really good solution, because often people used to fill only 1 field. It's really can make customer's registration faster. Unfortunately, I didn't find a solution in the Shopify settings. I thought about using the last name as full name, but I think it's not good actually. What do you think about it?

Thanks!

 

 

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--one-half medium-up--push-one-quarter">

      <div class="form-vertical">

        <h1 class="text-center">{{ 'customer.register.title' | t }}</h1>

        {%- assign formId = 'RegisterForm' -%}
        {% form 'create_customer', id: formId, novalidate: 'novalidate' %}
          {% include 'form-status', form: form, form_id: formId %}

          <label for="{{ formId }}-FirstName">{{ 'customer.register.first_name' | t }}</label>
          <input type="text" name="customer[first_name]" id="{{ formId }}-FirstName" {% if form.first_name %}value="{{ form.first_name }}"{% endif %} autocomplete="given-name">

          <label for="{{ formId }}-LastName">{{ 'customer.register.last_name' | t }}</label>
          <input type="text" name="customer[last_name]" id="{{ formId }}-LastName" {% if form.last_name %}value="{{ form.last_name }}"{% endif %} autocomplete="family-name">

          <label for="{{ formId }}-email">{{ 'customer.register.email' | t }}</label>
          <input
            type="email"
            name="customer[email]"
            id="{{ formId }}-email"
            class="{% if form.errors contains 'email' %} input--error{% endif %}"
            {% if form.email %} value="{{ form.email }}"{% endif %}
            autocorrect="off"
            autocapitalize="off"
            autocomplete="email"
            aria-required="true"
            {%- if form.errors contains 'email' -%}
              class="input--error"
              aria-invalid="true"
              aria-describedby="{{ formId }}-email-error"
            {%- endif -%}
          >
          {%- if form.errors contains 'email' -%}
            <span id="{{ formId }}-email-error" class="input-error-message">
              <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
              {% include 'icon-error' %}
              <span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
            </span>
          {%- endif -%}

          <label for="{{ formId }}-password">{{ 'customer.register.password' | t }}</label>
          <input
            type="password"
            name="customer[password]"
            id="{{ formId }}-password"
            class="{% if form.errors contains 'password' %} input--error{% endif %}"
            aria-required="true"
            {%- if form.errors contains 'password' -%}
              class="input--error"
              aria-invalid="true"
              aria-describedby="{{ formId }}-password-error"
            {%- endif -%}
          >
          {%- if form.errors contains 'password' -%}
            <span id="{{ formId}}-password-error" class="input-error-message">
              {% include 'icon-error' %}
              <span>{{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.</span>
            </span>
          {%- endif -%}

          <p class="text-center">
            <input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn">
          </p>

        {% endform %}
      </div>
    </div>
  </div>
</div>

 

 

 

0 Likes
Shopify Partner
12421 1505 4494

@Anna__ 

Thanks for the code but sorry how can i guide yours without store URL?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes