how to add customer name in shopify coming soon page? - shopify

Question

I am looking for a simple way to implement a simple "coming soon" (pre-launch) page for my project. Users should be able to leave an email and name in order to be notified when the project is launched.

Answer 1

You already have an email field on this page. When enters his email and clicks the Notify button, an inactive customer account will be created for that user. On launching your store you can send account invites to all the customers that submitted this form, using standard Shopify functionality.
You mentioned that you also want to collect customers names. You can do that by adding additional fields to this form. You're using Debut theme so just open the sections/password-content.liquid file and add these fields between {% form 'customer' %} ... {% endform %} tags. Note, as Shopify customer will be created, you have to use two fields - one for the first name and one for the second name. Just duplicate the email field and change name attributes. See an example below how these fields may look like, note how field names are grouped with contact[...]:
<input type="text" name="contact[first_name]" placeholder="First Name">
<input type="text" name="contact[last_name]" placeholder="Last Name">
You can also change the tags to be applied to the customer on creation. In the Debut theme, these tags are password page and prospect by default.
Adding more fields
You can collect more information on this page. Just add "note" fields with names like contact[note][Field name]. The information from these fields will be displayed in the Customer Note field. For example, if you want to ask customer leave a phone number you would use something like that:
<input type="text" name="contact[note][Phone]" placeholder="Phone">
You can follow the logic from this tutorial: Add fields to the customer registration form. Just make sure you're grouping fields with contact[] prefix rather than customer[] as described in the tutorial, which is actually about another form.

Answer 2

What I found with the Debut theme is that if you put
<input type="text" name="contact[first_name]" placeholder="First Name">
<input type="text" name="contact[last_name]" placeholder="Last Name">
in between these tags {% form 'customer' %} ... {% endform %}
The form fields get squished together.
I found that the below worked for me, if you add it before the section {% form 'customer' %} ... {% endform %}:
<center><input
type="text"
name="contact[first_name]"
placeholder="First Name">
<input
type="text"
name="contact[last_name]"
placeholder="Last Name"
></center>
<br>
I've added a screenshot to show you what it looks like in Shopify
This is the final result of my code

Answer 3

I have got it working to capture the first and second name by adding these fields:
<label>First Name</label>
<input
type="text"
name="contact[first_name]"
id="{{ formId }}-first_name"
class="input-group__field {% if form.errors contains 'first_name' %} input--error{% endif %}"
placeholder="Please enter your first name..."
{%- if form.errors contains 'first_name' -%}
aria-invalid="true"
aria-describedby="{{ formId }}-first_name-error"
data-form-status
{%- endif -%}
>
<label>Last Name</label>
<input
type="text"
name="contact[last_name]"
id="{{ formId }}-last_name"
class="input-group__field {% if form.errors contains 'last_name' %} input--error{% endif %}"
placeholder="Please enter your surname..."
{%- if form.errors contains 'last_name' -%}
aria-invalid="true"
aria-describedby="{{ formId }}-last_name-error"
data-form-status
{%- endif -%}
>
I'd love to know how to display errors if the fields are left blank though. Anyone know how to do this?
Many thanks.