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

Solved
Chris_Sydney
Shopify Partner
19 0 4

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)

Accepted Solutions
LitExtension
Shopify Partner
3731 738 782

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!

View solution in original post

Replies 8 (8)
LitExtension
Shopify Partner
3731 738 782

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 - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
Chris_Sydney
Shopify Partner
19 0 4

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
3731 738 782

Hi @britt-blyth,

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

Hope it helps!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Have not had your Shopify store yet? Start the 14-day free trial HERE
Are you looking for a solution to migrate to Shopify? Try our FREE DEMO now!
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
kedeyahko
New Member
7 0 0

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

 

leafstone
New Member
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