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?