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  

[Yohyon]

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