How to show form success message even if the customers email already exists?

Online Store and Theme Development
1

I am using Shopify’s customer form, when a new user fills in the form the form.posted_successfully message appears. I would like this message to show again if the user fills in the form with the same details. Currently after submitting with the same details it shows no errors or messages.

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

  <input
    type="email"
    name="contact[email]"
    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="Email"
    required
  >

    {%- if form.errors -%}
      <small id="Newsletter-error--{{ section.id }}" class="newsletter-errors">
        {%- render 'icon-error' -%}
        {{- form.errors.translated_fields.email | capitalize }}
        {{ form.errors.messages.email -}}
      </small>
    {%- endif -%}
  </div>
  {%- if form.posted_successfully? -%}
    <h3
      class="newsletter-success"
      id="Newsletter-success--{{ section.id }}"
      tabindex="-1"
      autofocus
    >
      Thank you for signing up!
    </h3>
  {%- endif -%}
1 Like
2

For some reason this is not supported in the form response data. However you could use a hack like this

document.addEventListener('DOMContentLoaded', function() {
  /**
   * Custom error message for already subscribed users
   */
  const catchAlreadySubscribedError = () => {
    const LIVE_URL = window.location.href;

    const inputVal = document.querySelector('[name="contact[email]"').value.length;
    const result = LIVE_URL.includes('form_type=customer');
    const responseDiv = document.querySelector('[data-already-subscribed]');

    if (result && inputVal != 0) {
      responseDiv.hidden = false;
    }
  }

  catchAlreadySubscribedError();
});

You would need to add a warning message element that describes the “error” to the client. In this case it should be something like <p data-already-subscribed>You're already subscribed!</p>.

This works because newsletter signups append form_type=customer to the URL, and because the only difference between a real error and the already-signed-up case, is the fact that the refreshed page has the email pre-filled in the form when the user is already signed up.

Hope it makes somewhat sense. It’s a weird case.

3

My guess would be that this is due to security, so bots or people with weird malcious purposes can’t check emails for their subscribed state. Imagine a taboo-site with a public newsletter form, that you could type in friends emails to see if they subscribe to this. Or whatever.

However, @Liam-Shopify, some thoughts to share with the team could be to make this optional behaviour. I’ve seen lots of cases where people want this.

4

Thanks @curzey! Got it working now, much appreciated.

1 Like
5

Happy to hear! You should mark it as solved :tada:

1 Like