Customer Registration First & Last Name fields in separate lines

New Member
2 0 0

For some reason, my customer registration page looks like the below. How do I change the code so that they are two separate fields, but still have the error check? I was using a custom form app, but had to switch over for various reasons so I'm trying to make a more robust account creation page. I'll be adding lots of fields as well, but want to fix this first.

Registration page.PNG

0 Likes
New Member
2 0 0

Here is what the code looks like in customer/register.cf-app-backup.liquid, which is where I think I need to make the update. 

 

<div class="full__page__form__wrapper">
<div class="wrapper">
<div class="grid">
<div class="grid__item medium--three-quarters medium--push-one-eighth large-up--one-half large-up--push-one-quarter">
<div class="full__page__form">
<h1 class="h2 text-center">{{ 'customer.register.title' | t }}</h1>

{% form 'create_customer' %}
{{ form.errors | default_errors }}
<div class="grid grid--full">
<div class="grid__item medium-up--one-half">
<div class="form__field form-padding--medium-up">
<label for="FirstName">
{{ 'customer.register.first_name' | t }}
</label>
<input type="text"
name="customer[first_name]"
id="FirstName"
placeholder="{{ 'customer.register.first_name' | t }}"
autofocus
{% if form.first_name %}value="{{ form.first_name }}"{% endif %}>
</div>
</div>
<div class="grid__item medium-up--one-half">
<div class="form__field">
<label for="LastName">
{{ 'customer.register.last_name' | t }}
</label>
<input type="text"
name="customer[last_name]"
id="LastName"
placeholder="{{ 'customer.register.last_name' | t }}"
{% if form.last_name %}value="{{ form.last_name }}"{% endif %}>
</div>
</div>
</div>
<div class="form__field">
<label for="Email">
{{ 'customer.register.email' | t }}
</label>
<input type="email"
name="customer[email]"
id="Email"
class="{% if form.errors contains 'email' %}input-error{% endif %}"
placeholder="{{ 'customer.register.email' | t }}"
value="{% if form.email %}{{ form.email }}{% endif %}"
spellcheck="false"
autocomplete="off"
autocapitalize="off">
</div>
<div class="form__field">
<label for="CreatePassword">
{{ 'customer.register.password' | t }}
</label>
<input type="password"
name="customer[password]"
id="CreatePassword"
class="{% if form.errors contains 'password' %}input-error{% endif %}"
placeholder="{{ 'customer.register.password' | t }}">
</div>

<input type="submit" value="{{ 'customer.register.submit' | t }}" class="btn btn--full btn--form">
<div class="form--additional">
<a class="border-bottom-link" href="{{ shop.url }}">{{ 'customer.register.cancel' | t }}</a>
<span class="dot-spacer">•</span>
<a class="border-bottom-link" href="/account" class="border-bottom-link">{{ 'customer.login.title' | t }}</a>
</div>
{% endform %}
</div>
</div>
</div>
</div>
</div>

0 Likes

@hokeypokeybaby it looks like you are using or have used a third-party app to create this form. Based on the template name, it looks like you used "Customer Account Fields" by Bonify. On this page, Bonify mentions they create a backup file called "templates/customers/register.cf-app-backup.liquid."

 

Have you tried reaching out to the developer for support? If not, that's a good place to start. 

If you've already uninstalled the app, it looks like they may have left some mess behind. It's a common misconception that removing an app reverts back any theme code changes made by the app-- that is false. Unfortunately, there are many apps on the Shopify App Store which do not properly warn you about changes to your theme code and how to revert back.

 

If you're still having trouble, you may want to give Customer Fields a try (link below in signature). It's possible that simply installing a new registration form using Customer Fields fixes your problem, but if not, our support team can help fix the problem.

Michael | Business Development @ Helium
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- User friendly apps with top-rated US-based support
Customer Fields App (since 2015)
Meteor Mega Menu App (since 2014)
0 Likes

The template titled customer/register.cf-app-backup.liquid is simply a back up of your theme's registration page before you installed the third-party app. To edit your theme's registration page you will need to edit this template customers/register.liquid

 

 

Michael | Business Development @ Helium
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- User friendly apps with top-rated US-based support
Customer Fields App (since 2015)
Meteor Mega Menu App (since 2014)
0 Likes