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

Online Store and Theme Development
, ,
1

Hi Guys, I have searched through so so many threads and cannot find coding for this. I have a password page and would like to simply add a field onto it to collect information that will go to their customer profile prior to a drop.

Banner 2
Banner 2407×793 45.1 KB

3
Unirse
4

What? I dont understand

5

Hey Bryan - which theme are you using? You might need to save the name as a metafield which would be associated with the customers profile, if the native password input/ form doesn’t support adding a name field.

6

Hello, I am using the Dawn Theme. How would I add the metafield?

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:

8

Hi Liam, that is great and will do for now! Can I be a pain and just ask if you could also add mobile to this as SMS is becoming a big avenue to send customers content for collection drops etc. How will these tags go when Klaviyo picks up profiles?

9

Hey Bryan,

You should be able to follow the same approach to add a third field, which would again store info to tags.

It’s unlikely however that Klavyio will automatically interpret these tags are the customer name (or phone number) - if that’s a hard requirement, you may need to use a different approach, like creating a fully custom sign up form for the password page rather than extending the existing form.

Have you checked out some apps like: