A really simple vanilla form to subscribe to a Mailchimp list. Gracefully degrades if JavaScript is disabled.

mailchimp-basic-subscribe.css

.mailchimp {}

.mailchimp__email {}

.mailchimp__spamnet {
  position: absolute;
  left: -5000px;
}

.mailchimp__submit {}

.mailchimp__submit:disabled {}

.mailchimp__error {
  display: none;
}

.mailchimp__success {
  display: none;
}

mailchimp-basic-subscribe.html

<article class="mailchimp">
  <form action="//XXX-manage.com/subscribe/post?u=XXX&amp;id=XXX" method="post" name="mc-embedded-subscribe-form" target="_blank" class="mailchimp__form" novalidate>
    <input type="email" value="" name="EMAIL" placeholder="email address" class="mailchimp__email" />
    <input type="hidden" name="u" value="XXX" />
    <input type="hidden" name="id" value="XXX" />
    <div aria-hidden="true" class="mailchimp__spamnet">
      <input type="text" name="RANDOM_ID" tabindex="-1" value="" />
    </div>
    <input type="submit" value="Subscribe" name="subscribe" class="mailchimp__submit" />
    <p class="mailchimp__error"></p>
  </form>
  <div class="mailchimp__success"></div>
</article>

<script>
  (function() {
    
    $('.mailchimp').each(function(mailchimp) {
  
      var form = $('form:first', mailchimp),
        submitButton = $('.mailchimp__submit', mailchimp),
        errMessage = $('.mailchimp__error', mailchimp),
        successState = $('.mailchimp__success:first', mailchimp),
        url = form.attr('action').replace('/post?', '/post-json?').concat('&c=?');
  
      function errorCallback(err) {
        errMessage.text(err.msg.split(' - ')[1]).show();
        submitButton[0].disabled = true;
      }
  
      function successCallback(data) {
        if (data.result === 'error') return errorCallback(data)
        else if (data.result === 'success') {
          form.hide();
          successState.text(data.msg).show();
        }
      }
  
      form.unbind('submit').submit(function(e) {
        e.preventDefault();
        submitButton[0].disabled = true;
        errMessage.hide();
        $.ajax({
          cache: false,
          contentType: "application/json; charset=utf-8",
          data: form.serialize(),
          dataType: 'jsonp',
          timeout: 5000,
          type: "GET",
          url: url,
          error: errorCallback,
          success: successCallback
        });
      });
  
    });
    
  })();
</script>

mailchimp-basic-subscribe.twig

{#
  // with inline options
  {% include 'partials/mailchimp-signup.twig' with { 'api' : { 'url':'//omnifi.us11.list-manage.com/subscribe/post?u=64f3d1c03a455bae465168591&id=d3ff8b8a50', 'u':'64f3d1c03a455bae465168591', 'id':'d3ff8b8a50', 'random_id':'b_64f3d1c03a455bae465168591_d3ff8b8a50' } } only %}
  // via options (wordpress)
  {% include 'partials/mailchimp-signup.twig' %}
#}

{% set api = api|default(options) %}

<article class="mailchimp">
  <form action="{{api.url}}" method="post" name="mc-embedded-subscribe-form" target="_blank" class="mailchimp__form" novalidate>
    <input type="email" value="" name="EMAIL" placeholder="email address" class="mailchimp__email" />
    <input type="hidden" name="u" value="{{api.u}}" />
    <input type="hidden" name="id" value="{{api.id}}" />
    <div aria-hidden="true" class="mailchimp__spamnet">
      <input type="text" name="{{api.random_id}}" tabindex="-1" value="" />
    </div>
    <input type="submit" value="Subscribe" name="subscribe" class="mailchimp__submit" />
    <p class="mailchimp__error"></p>
  </form>
  <div class="mailchimp__success"></div>
</article>

<script>
  (function() {
    
    $('.mailchimp').each(function(mailchimp) {
  
      var form = $('form:first', mailchimp),
        submitButton = $('.mailchimp__submit', mailchimp),
        errMessage = $('.mailchimp__error', mailchimp),
        successState = $('.mailchimp__success:first', mailchimp),
        url = form.attr('action').replace('/post?', '/post-json?').concat('&c=?');
  
      function errorCallback(err) {
        errMessage.text(err.msg.split(' - ')[1]).show();
        submitButton[0].disabled = true;
      }
  
      function successCallback(data) {
        if (data.result === 'error') return errorCallback(data)
        else if (data.result === 'success') {
          form.hide();
          successState.text(data.msg).show();
        }
      }
  
      form.unbind('submit').submit(function(e) {
        e.preventDefault();
        submitButton[0].disabled = true;
        errMessage.hide();
        $.ajax({
          cache: false,
          contentType: "application/json; charset=utf-8",
          data: form.serialize(),
          dataType: 'jsonp',
          timeout: 5000,
          type: "GET",
          url: url,
          error: errorCallback,
          success: successCallback
        });
      });
  
    });
    
  })();
</script>