Duplicate IDs in customer form of Minimal theme

simonski
Shopify Partner
125 9 47

I use minimal theme, unfortunately, in dev tools I get a warning of duplicate IDs.

It's in the newsletter-form.liquid, because the customer form is implemented twice, and I guess one is hidden. 

<div class="form-vertical small--hide">
  {% form 'customer' %}
    {{ form.errors | default_errors }}
    {% if form.posted_successfully? %}
      <p class="note form-success">{{ 'general.newsletter_form.confirmation' | t }}</p>
    {% else %}
      <input type="hidden" name="contact[tags]" value="newsletter">
      <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="contact[email]" id="Email" class="input-group-field" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}" autocorrect="off" autocapitalize="off">
      <input type="submit" class="btn" name="subscribe" id="subscribe" value="{{ 'general.newsletter_form.submit' | t }}">
    {% endif %}
  {% endform %}
</div>
<div class="form-vertical post-large--hide large--hide medium--hide">
  {% form 'customer' %}
    {{ form.errors | default_errors }}
    {% if form.posted_successfully? %}
      <p class="note form-success">{{ 'general.newsletter_form.confirmation' | t }}</p>
    {% else %}
      <input type="hidden" name="contact[tags]" value="newsletter">
      <div class="input-group">
        <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="contact[email]" id="Email" class="input-group-field" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}" autocorrect="off" autocapitalize="off">
        <span class="input-group-btn">
          <button type="submit" class="btn" name="commit" id="subscribe">{{ 'general.newsletter_form.submit' | t }}</button>
        </span>
      </div>
    {% endif %}
  {% endform %}
</div>

 So, id "subscribe" and the id "E-Mail" is in there twice. Can I just delete the whole "id="subscribe"" part and "id="E-Mail"" of the first form, or is sth maybe not working afterwards? It seems ok, but I don't know exactly. Anyone else seeing this? Actually everyone with minimal theme must see the warning in dev tools no??

And there is one more thing, I get another warning: "[DOM] Found 2 elements with non-unique id #contact_form". Unfortunately, this seems to be dynamically inserted with the command "{% form 'customer' %}". What is created is:

<form method="post" action="/contact#contact_form" id="contact_form" accept-charset="UTF-8" class="contact-form"><input type="hidden" name="form_type" value="customer"><input type="hidden" name="utf8" value="✓">

 Unfortunately, this is created twice, because "{% form 'customer' %}" is there twice. How can I get rid or change the id of that?

Again, am I the only one getting these warnings?

0 Likes
yazok8
New Member
1 0 0

Hey there, 

I'm using the minimal theme too and getting the same error. Have you managed to fix it? 

0 Likes
simonski
Shopify Partner
125 9 47

I changed the 2nd 

id="Email"

to 

id="Email2"

 So far I didn't see any negative effects.

0 Likes