Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
In 2.0 this worked to add first and last names, but if I change the code in a copy of 30.1 it doesn't.
I changed the email place holder to prove I'm using en.default.json
Here's the code that used to work
In newsletter.liquid
<div {{ block.shopify_attributes }}>
{% form 'customer', class: 'newsletter-form' %}
<input type="hidden" name="contact[tags]" value="newsletter">
<div
class="newsletter-form__field-wrapper{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="text"
name="contact[first_name]"
class="field__input"
value="{{ form.first_name }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="first_name"
placeholder="{{ 'newsletter.first_name' | t }}"
required
>
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.first_name' | t -}}
</label>
</div>
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="text"
name="contact[last_name]"
class="field__input"
value="{{ form.last_name }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="last_name"
placeholder="{{ 'newsletter.last_name' | t }}"
>
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.last_name' | t -}}
</label>
</div>
<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="Newsletter-error--{{ section.id }}"
{% elsif form.posted_successfully? %}
aria-describedby="Newsletter-success--{{ section.id }}"
{% 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="Newsletter-error--{{ section.id }}">
{%- 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="Newsletter-success--{{ section.id }}"
tabindex="-1"
autofocus
>
{% render 'icon-success' -%}
{{- 'newsletter.success' | t }}
</h3>
{%- endif -%}
{% endform %}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
In en.default.json
"newsletter": {
"first_name": "First Name",
"last_name": "Last Name",
"label": "Email",
"success": "Thanks for subscribing",
"button_label": "Subscribe"
},
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025