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

Solved

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

Chris_Sydney
Shopify Partner
91 4 16

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 -%}
Accepted Solution (1)

LitExtension
Shopify Partner
4860 1002 1151

This is an 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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 16 (16)

LitExtension
Shopify Partner
4860 1002 1151

This is an 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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Chris_Sydney
Shopify Partner
91 4 16

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
Tourist
9 0 4

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
Shopify Partner
4860 1002 1151

Hi @britt-blyth,

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

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
carven
Tourist
5 0 2

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

carven_0-1647857154217.png

 

carven
Tourist
5 0 2

Problem Solved

kedeyahko
Tourist
8 0 1

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

 

leafstone
Visitor
1 0 0

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?Screen Shot 2022-04-07 at 10.02.23 AM.png

FOP
Explorer
114 0 17

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

LitExtension
Shopify Partner
4860 1002 1151

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.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
JBMartin
Excursionist
22 0 7

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
Excursionist
22 0 7

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
Visitor
1 0 0

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

jules_moradi
Visitor
2 0 0

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
Tourist
3 0 0

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?

Yohyon
Visitor
2 0 0

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