adding first_name and last_name to newsletter form ( form 'customer', id: 'ContactFooter' ) DAWN

[Chris_Sydney]

Hey All, 

Wondering if anyone has any thought on how to add the first_name and last_name to the new dawn 2.0 theme. 

the code is as followed, I thought I would need to add

{form.first_name} and {form.last_name} plus contact[first_name] and contact[last_name] and change the input to text (with some other formating issues), but i cant see to get it to fire. 

see code below:

{%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}

<input type="hidden" name="contact[tags]" value="newsletter">

<div class="newsletter-form__field-wrapper">

<div class="field">

<input

id="NewsletterForm--{{ section.id }}"

type="email"

name="contact[email]"

class="field__input"

value="{{ form.email }}"

aria-required="true"

autocorrect="off"

autocapitalize="off"

autocomplete="email"

{% if form.errors %}

autofocus

aria-invalid="true"

aria-describedby="ContactFooter-error"

{% elsif form.posted_successfully? %}

aria-describedby="ContactFooter-success"

{% endif %}

placeholder="{{ 'newsletter.label' | t }}"

required

>

<label class="field__label" for="NewsletterForm--{{ section.id }}">

{{ 'newsletter.label' | t }}

</label>

<button type="submit" class="newsletter-form__button field__button" name="commit" id="Subscribe" aria-label="{{ 'newsletter.button_label' | t }}">

{% render 'icon-arrow' %}

</button>

</div>

{%- if form.errors -%}

<small class="newsletter-form__message form__message" id="ContactFooter-error">{% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</small>

{%- endif -%}

</div>

{%- if form.posted_successfully? -%}

<h3 class="newsletter-form__message newsletter-form__message--success form__message" id="ContactFooter-success" tabindex="-1" autofocus>{% render 'icon-success' %}{{ 'newsletter.success' | t }}</h3>

{%- endif -%}

{%- endform -%}

[LitExtension · Accepted solution]

Hi @Chris_Sydney,

You can add these 2 fields:

<div class="field">
<input class="field__input" autocomplete="name" type="text" id="ContactForm-first_name" name="contact[{{ 'customer.register.first_name' | t }}]" value="{% if form.first_name %}{{ form.first_name }}{% elsif customer %}{{ customer.first_name }}{% endif %}" placeholder="{{ 'customer.register.first_name' | t }}">
<label class="field__label" for="ContactForm-first_name">{{ 'customer.register.first_name' | t }}</label>
</div>
<div class="field">
<input class="field__input" autocomplete="name" type="text" id="ContactForm-last_name" name="contact[{{ 'customer.register.last_name' | t }}]" value="{% if form.first_name %}{{ form.last_name }}{% elsif customer %}{{ customer.last_name }}{% endif %}" placeholder="{{ 'customer.register.last_name' | t }}">
<label class="field__label" for="ContactForm-last_name">{{ 'customer.register.last_name' | t }}</label>
</div>

Hope it helps!

Please mark as a solution if you find my answer helpful for you.

[Chris_Sydney]

Hi @LitExtension 

Thanks for your feedback on this, That looks like it works but actually I had the inputs right and had a faulty output on the Dawn 2.0 theme that was giving me the wrong error... ending up being a caputa issue with a bad display. 

Cheers, 

Chris

[britt-blyth]

Hello! Where does this get posted in code and what line? I would like to add First name to my newsletter form on the Dawn theme. Thank you!

[LitExtension]

Hi @britt-blyth,

Please go to sections/contact-form.liquid file, you can find it here.

Hope it helps!

[carven]

Hi, May I know which line to place the 2 fields of code in sections/contact-form.liquid file? Thank you 

[carven]

Problem Solved

[kedeyahko]

hi @carven  did you find where to put this code? I am looking to add first name only to my newsletter sign up 

[leafstone]

Hi - This is what happens when I add this code to the bottom of that section. I added it after endschema (line 218 for me). How do I get these fields to be in line with the email field?

[FOP]

Do you know where about this code is pasted in the file?  I can't seem to figure it out.

[LitExtension]

Hi @FOP,

You can create a question on the community and send me the link. I will check it.
Because this will help build a better community.
Thank you.

[JBMartin]

I am sorry, I'm still not getting an answer from this thread.  Please can someone actually explain what code to add into the email sign up form and where?  Many of us would clearly like to capture email + first name, instead of just email.  We are happy with the email sign up form as it is, but just need it to have two rows (two fields): one for first name and one for email.  Please can someone help?

Thank you.

Josh

[JBMartin]

I've found a solution that worked for me: https://www.youtube.com/watch?v=Ftx5krQYCQo

(also reproduced at: https://websensepro.com/blog/learn-how-to-add-new-field-in-shopify-newsletter-form/). 

You can now see that my store Vandal Gallery has the name fields as well as email fields.  Yay!

[cassiebizz]

Thank you so much for posting this. This also worked perfectly for me!!! Great resource. 

[jules_moradi]

Hi there, I also want to add a first name field to my email signup form in Studio in Shopify 2.0. I don't know coding, and when I try pasting the code above in the custom CSS field for the sign up section in the theme customiser, it doesn't work. I'm reluctant to add it to the theme code via the 3 dots because there's a warning that I won't be able to update the theme. Can you help please? Thanks!

Jules  

[GenK]

This worked for me as far as creating the boxes for the first name and last name fields, but I can't get the placeholder labels to show up. Can you help?

[Nellarctico]

This looks good, and the fields came up nicely, trouble is I did a test filling out my names and only the email came up in the customer listings, no first or last name included, so not sure what to do about that! Any ideas? Many thanks!

[suzal]

By adding the first and last name fields, will the entered data be visible in the customers in Shopify dashboard, like the email address is? Or where is it expected to show up?

[Yohyon]

Sorry Chris, but how do I add the code to the subscription form?

[suzal]

i have added code for first name and last name. its working for me

<div class="newsletter-form-wrapper">
<div class="footer-block__newsletter">
{%- if section.settings.newsletter_heading != blank -%}
<h2 class="footer-block__heading inline-richtext">{{ section.settings.newsletter_heading }}</h2>
{%- endif -%}
{%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="newsletter-form__field-wrapper">
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="email"
name="contact[email]"
class="field__input"
value="{{ form.email }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
{% if form.errors %}
autofocus
aria-invalid="true"
aria-describedby="ContactFooter-error"
{% elsif form.posted_successfully? %}
aria-describedby="ContactFooter-success"
{% endif %}
placeholder="{{ 'newsletter.label' | t }}"
required
>
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
</div>
<div class="field">
<input
id="NewsletterForm-first-name-{{ section.id }}"
type="text"
name="contact[first_name]"
class="field__input"
value="{% if form.first_name %}{{ form.first_name }}{% elsif customer %}{{ customer.first_name }}{% endif %}"
autocomplete="given-name"
placeholder="{{ 'customer.register.first_name' | t }}"
>
<label class="field__label" for="NewsletterForm-first-name-{{ section.id }}">
{{ 'customer.register.first_name' | t }}
</label>
</div>

<div class="field">
<input
id="NewsletterForm-last-name-{{ section.id }}"
type="text"
name="contact[last_name]"
class="field__input"
value="{% if form.last_name %}{{ form.last_name }}{% elsif customer %}{{ customer.last_name }}{% endif %}"
autocomplete="family-name"
placeholder="{{ 'customer.register.last_name' | t }}"
>
<label class="field__label" for="NewsletterForm-last-name-{{ section.id }}">
{{ 'customer.register.last_name' | t }}
</label>
</div>

<div class="newsletter-form__button-wrapper">
<button
type="submit"
class="newsletter-form__button"
name="commit"
id="Subscribe"
aria-label="{{ 'newsletter.button_label' | t }}"
>
Subscribe
</button>
</div>

{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="ContactFooter-error">
<span class="svg-wrapper">
{{- 'icon-error.svg' | inline_asset_content -}}
</span>
{{- form.errors.translated_fields.email | capitalize }}
{{ form.errors.messages.email -}}
</small>
{%- endif -%}
</div>
{%- if form.posted_successfully? -%}
<h3
class="newsletter-form__message newsletter-form__message--success form__message"
id="ContactFooter-success"
tabindex="-1"
autofocus
>
<span class="svg-wrapper">
{{- 'icon-success.svg' | inline_asset_content -}}
</span>
{{- 'newsletter.success' | t }}
</h3>
{%- endif -%}
{%- endform -%}
</div>
</div>