Adding A (Name or Number) Field Into Password Email Banner Section

Online Store and Theme Development
, ,
7

Hey Bryan,

So I’ve dug into this a bit more and it may not be possible to populate a customer name with the newsletter sign up form, but a work around could be to capture the name field as tags on the customer.

This way, once the customer adds the same and email, the email will appear as the name (like the default state) but the name will be saved in the tags on the customer page of the admin:

1066×402 8.78 KB

Here’s a video of what that would look like: https://screenshot.click/08-59-w8p3i-rn889.mp4

To implement this, you’d replace the form on the email-signup-banner.liquid section with this:

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

  <div class="newsletter-form__field-wrapper">
    <!-- NAME FIELD -->
    <div class="field">
      <input
        id="NewsletterFormName--{{ section.id }}"
        type="text"
        name="user_name"
        class="field__input"
        placeholder="Your name"
      >
      <label class="field__label" for="NewsletterFormName--{{ section.id }}">
        Name
      </label>
    </div>

    <!-- EMAIL FIELD (unchanged) -->
    <div class="field">
      <input
        id="NewsletterForm--{{ section.id }}"
        type="email"
        name="contact[email]"
        class="field__input"
        placeholder="Your email"
        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 }}"
      >
        <span class="svg-wrapper">
          {{ 'icon-arrow.svg' | inline_asset_content }}
        </span>
      </button>
    </div>
  </div>

{% endform %}

and then add a script just above where the schema opens on the section, that appends the content in the name field to the customer tags:

<script>
document.addEventListener("DOMContentLoaded", function() {
  var nameField = document.getElementById("NewsletterFormName--{{ section.id }}");
  var tagsField = document.getElementById("ContactTags");

  nameField.addEventListener("input", function() {
    var userName = nameField.value.trim();
    if (userName) {
      tagsField.value = "newsletter, " + userName;
    } else {
      tagsField.value = "newsletter";
    }
  });
});
</script>

Hope this workaround helps :slight_smile: