Customising the Customer Registration Form

Solved
Highlighted
Tourist
7 0 1

Hi!

I'm hoping someone can help me. I am a code newbie but love to give things a go myself. 

I have added a Birth Month drop down menu to my registration liquid using the below code:

<br /><label for="Birthday">Birth Month</label><br />

<input list="birthday" name="birthday" id="browser">

<datalist id="birthday">
<option value="January">
<option value="February">
<option value="March">
<option value="April">
<option value="May">
<option value="June">
<option value="July">
<option value="August">
<option value="September">
<option value="October">
<option value="November">
<option value="December">
</datalist><br />

The Birth Month drop down works on the form however it doesn't come through on the customers account. I would like the Birth Month to appear in their personal customer tag.

Does anybody know how to do this?

I'm sure it is just a tiny tweak to the coding.

Thanks!

Screen Shot 2020-10-30 at 15.34.53.png

0 Likes
Highlighted

Hi there,
Jack from OpenThinking here!

You can find the various address variables at this link and other customer variables at this link.
This should help you set up the collection of the customers data during registration.



let me know if this works for your. If yes; accept my answer and give me thumbs up! Thank you.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
7 0 1

Hi Jack, 

Where do I add one of these codes into my original code?

I would like the Birth Date that the customer enter to be found in their tags which i'm guesing is this snippet of code from your link:

{% for tag in customer.tags %} {{ tag }} {% endfor %}

Where would I add tis to my original code below?

<br /><label for="Birthday">Birth Month</label><br />

<input list="birthday" name="birthday" id="browser">

<datalist id="birthday">
<option value="January">
<option value="February">
<option value="March">
<option value="April">
<option value="May">
<option value="June">
<option value="July">
<option value="August">
<option value="September">
<option value="October">
<option value="November">
<option value="December">
</datalist><br />

 

Thanks!

0 Likes
Highlighted

In order to send the data to the server you've to wrap that code inside the <form> tag.

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, and then click Actions > Edit code.
  3. In the Templates directory, click customers/register.liquid.
  4. Find the following Liquid tags in the code:

 

 

{% form 'create_customer' %}
and
{% endform %}

 

 

  1. You will paste the code for your custom field(s) before, after, or in between the existing fields, depending on your preference. 
  2. Save

and I'd go with a select (dropdown) instead of a datalist.

 

 

<label for="yourBirthMonth">Birth Month</label>
<select id="yourBirthMonth" name="customer[note][Birthmonth]">
	<option value="January">January</option>
	<option value="February">February</option>
	<option value="March">March</option>
	<option value="April">April</option>
	<option value="May">May</option>
	<option value="June"> June </option>
	<option value="July"> July </option>
	<option value="August"> August </option>
	<option value="September"> September </option>
	<option value="October"> October </option>
	<option value="November"> November </option>
	<option value="December"> December </option>
</select>

 

 

I didn't test this code, so I don't guarantee it works.

if yes, accept my answer and give me thumbs up! Thanks.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted

Or you could use an App to do that for your.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Tourist
7 0 1
Unfortunately that code didn't work on my theme.

In my theme I must use a data list instead of a dropdown.

Where do I put the in the code I have already used?

Thanks for your help.

Ceris


0 Likes
Highlighted

follow the steps but instead of the dropdown use the datalist.

⚡️ [Shopify Themes]: Lightning-fast, Highly converting, SEO-optimized, Minimal.
⚡️ Need help with your store? [Get a quote]
0 Likes
Highlighted
Shopify Expert
55 10 21

This is an accepted solution.

Hi @Ceris!

The name attribute that @OpenThinking provided will work to add a Customer Note into Shopify with the customer's selected birth month (e.g. Birthmonth: April), but if you want the data to appear as a customer tag in Shopify then you will need to use the following name attribute instead:



customer[tags]

Here's a code snippet that should do what you are looking for:

 

<label for="yourBirthMonth">Birth Month</label>
<input list id="yourBirthMonth" name="customer[tags]">
<datalist id="yourBirthMonth">          
	<option value="January">January</option>
	<option value="February">February</option>
	<option value="March">March</option>
	<option value="April">April</option>
	<option value="May">May</option>
	<option value="June">June</option>
	<option value="July">July</option>
	<option value="August">August</option>
	<option value="September">September</option>
	<option value="October">October</option>
	<option value="November">November</option>
	<option value="December">December</option>
</datalist>

 

 

Of course you'll need to add this into your theme's registration template (templates/customers/register.liquid) before the {% endform %} tag. 

If you're looking for another app suggestion, then be sure to take a look at the Customer Fields app. The app's form builder is very powerful, easy to use, and it can tag customers in a variety of different ways without having to edit any theme code. You can learn more about the tagging options here: http://help.heliumdev.com/en/articles/3567319-customer-auto-tagging

 

Hopefully this helps!

Kyle W | Helium Dev, LLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
Helium builds user friendly apps with top-rated US-based support
Our apps: Customer Fields & Meteor Mega Menus
Highlighted
Tourist
7 0 1
Thanks Kyle,

That did it!

Highlighted
Shopify Expert
55 10 21

Sure thing, Ceris! I'm glad to hear it's working for ya

Kyle W | Helium Dev, LLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
Helium builds user friendly apps with top-rated US-based support
Our apps: Customer Fields & Meteor Mega Menus
0 Likes