Add first name to newsletter Savage theme

[teeade]

Hello please I have Savage theme, which is part of Sahara. I am trying to add first name to my newsletter sign up. It’s really important to my business. please can anyone help? At the moment it’s only email.

{%- comment -%}
  Accepts:
  - namespace {String} - an unique id for the form fields.
  - js_class? {String} - JS selector class
  - submit_button_text {String} - Submit button text
  Usage:
  {% render 'newsletter-form' %}

{%- endcomment -%}

{%-
  liquid
  assign class = 'newsletter-form ' | append: js_class
  assign namespace = namespace | default: ''
  assign form_id = 'contact-form-' | append: namespace
  assign submit_button_text_default = 'newsletter-form.submit_button.submit' | t
  assign submit_button_text = submit_button_text | default: submit_button_text_default
  assign success_message = success_message
-%}

{%- form 'customer', class: class, id: form_id -%}
  <input type="hidden" name="contact[tags]" value="newsletter">

  <div class="newsletter__controls">
    {%-
      liquid
      assign label = 'newsletter-form.email.label' | t
      assign placeholder = 'newsletter-form.email.placeholder' | t
      assign is_form_posted = false
      capture attr
        echo 'aria-required="true" '
        echo 'autocapitalize="off" '
        echo 'autocomplete="email" '
        if form.errors
          echo 'autofocus '
        endif
      endcapture
      if form.errors
        assign message = form.errors.translated_fields.email | capitalize | append: ' ' | append: form.errors.messages.email
        assign has_error = true
      elsif form.posted_successfully?
        if success_message != blank
          assign message = success_message
        else
          assign message = 'newsletter-form.success' | t
        endif
        assign is_form_posted = true
      endif
      assign id = 'NewsletterForm--' | append: section.id
      render 'text-input', id: id, label: label, type: 'email', name: 'contact[email]', h_value: 'h3', placeholder: placeholder, attr: attr, message: message, has_error: has_error, required: true, value: form.email, hide_label: true, class: 'newsletter__field', is_form_posted: is_form_posted
    -%}

    <button type="submit" class="button-reset newsletter__button{% if is_form_posted %} hidden{% endif %}" id="Subscribe-{{- section.id -}}" name="commit" aria-label="{{- submit_button_text -}}">
      {{- submit_button_text -}}
    </button>
  </div>
{%- endform -%}

[teeade]

Thanks so much for the help. It works, however the first name field appears this way. Photo attached.

[The_ScriptFlow]

Can you try with this code instead.

{%- comment -%}
  Accepts:
  - namespace {String} - an unique id for the form fields.
  - js_class? {String} - JS selector class
  - submit_button_text {String} - Submit button text
  Usage:
  {% render 'newsletter-form' %}
{%- endcomment -%}
{%-
  liquid
  assign class = 'newsletter-form ' | append: js_class
  assign namespace = namespace | default: ''
  assign form_id = 'contact-form-' | append: namespace
  assign submit_button_text_default = 'newsletter-form.submit_button.submit' | t
  assign submit_button_text = submit_button_text | default: submit_button_text_default
  assign success_message = success_message
-%}
{%- form 'customer', class: class, id: form_id -%}
  <input type="hidden" name="contact[tags]" value="newsletter">
  <div class="newsletter__controls">
    {%-
      liquid
      capture first_name_attr
        echo 'autocapitalize="words" '
        echo 'autocomplete="given-name" '
      endcapture
      assign first_name_id = 'NewsletterFormFirstName--' | append: section.id
      render 'text-input', id: first_name_id, label: 'First Name', type: 'text', name: 'contact[first_name]', h_value: 'h3', placeholder: 'First Name', attr: first_name_attr, hide_label: true, class: 'newsletter__field', value: form.first_name
    -%}
    {%-
      liquid
      assign label = 'newsletter-form.email.label' | t
      assign placeholder = 'newsletter-form.email.placeholder' | t
      assign is_form_posted = false
      capture attr
        echo 'aria-required="true" '
        echo 'autocapitalize="off" '
        echo 'autocomplete="email" '
        if form.errors
          echo 'autofocus '
        endif
      endcapture
      if form.errors
        assign message = form.errors.translated_fields.email | capitalize | append: ' ' | append: form.errors.messages.email
        assign has_error = true
      elsif form.posted_successfully?
        if success_message != blank
          assign message = success_message
        else
          assign message = 'newsletter-form.success' | t
        endif
        assign is_form_posted = true
      endif
      assign id = 'NewsletterForm--' | append: section.id
      render 'text-input', id: id, label: label, type: 'email', name: 'contact[email]', h_value: 'h3', placeholder: placeholder, attr: attr, message: message, has_error: has_error, required: true, value: form.email, hide_label: true, class: 'newsletter__field', is_form_posted: is_form_posted
    -%}
    <button type="submit" class="button-reset newsletter__button{% if is_form_posted %} hidden{% endif %}" id="Subscribe-{{- section.id -}}" name="commit" aria-label="{{- submit_button_text -}}">
      {{- submit_button_text -}}
    </button>
  </div>
{%- endform -%}

[teeade]

Thank you! That worked. I did a tester, entering a first name and email address and it logged it in my customers which is great thank you. However the first name tab remains when the thank you message appears. Is this normal? Or is there a way to keep it clean.

[teeade]

@The_ScriptFlow I mean is there a way to have the thank you message come up on its own and replace the first name and last name once people sign up.

[The_ScriptFlow]

This requires to take a look in your theme file.

May I have your store collab code so that I can take a look into it.

Thanks

[The_ScriptFlow]

@teeade

3468

Thanks for sharing. I just send you request for accessing the store.
Please accept it.
Thanks