Shopify Newsletter Signup Form

newsletter.liquid

<div class="newsletter outer relative pv1 ts1">
  <div class="absolute fit-x">
    <div class="gradient-background absolute fit-x bg-c1"></div>
  </div>

  <div class="container--s mha relative tsx mv1">
    <div class="newsletter__inner mha w1 flex flex-items-center flex-wrap">

      <div class="newsletter__title mb1 pb05 w1 w12_m cw align-c">
        <img src="{{ 'icon-leaves-arch-yellow.png' | asset_url }}" class="inline-block mb05"/>
        <h3 class="mv0">Stay Healthy</h3>
        <p class="mv0">Get the latest updates straight to your inbox.</p>
      </div>

      <div class="w1 w12_m" data-component="newsletter-form">
        <div id="newsletterSuccess" class="newsletter__success hide cw fit-x p">Thanks for signing up!</div>

        {% if settings.mailchimp_url != blank %}

          <form target="_blank" action="{{ settings.mailchimp_url }}" method="post">
            <div class="flex flex-items-start">
              <div class="newsletter__field flex-auto relative">
                <input id="newsletterEmail" class="w1" required name="EMAIL" type="email" placeholder="Email Address" value="{% if customer %}{{ customer.email }}{% endif %}" autocorrect="off" autocapitalize="off">
                <span class="form-error absolute fit-l italic cw p00 hide">Email is invalid</span>
                <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_b075be5b166b58f7abfca70eb_84b14e6b78" tabindex="-1" value=""></div>
              </div>

              <button type="submit" class="button button--dark">Submit</button>
            </div>
          </form>

        {% else %}

          {% form 'customer' %}
            {% if form.posted_successfully? %}
              <div id="newsletterSuccess" class="newsletter__success cw mv05"><p>Thank you for signing up!</p></div>
            {% else %}
              <div class="flex flex-items-start">
                <div class="newsletter__field flex-auto">
                  <input id="newsletterEmail" class="w1" name="contact[email]" type="email" placeholder="Email Address" required value="{% if customer %}{{ customer.email }}{% endif %}" autocorrect="off" autocapitalize="off">
                </div>

                <button type="submit" class="button button--dark">Submit</button>
              </div>
              {% if form.errors %}
                <p class="newsletter__error align-c c3 mt05">*Invalid email address, try again.</p>
              {% endif %}
            {% endif %}
          {% endform %}

        {% endif %}
      </div>

    </div>
  </div>
</div>

Example usage with Conform can be found on the Wiki.