Cartzilla Buy now

Mailchimp subscription form

Mailchimp is a marketing automation platform and an email marketing service.

In other words this Mailchimp widget will help you to collect user emails right from you website to run email marketing campaign via Mailchimp web application. Below is the live example of the widget that collects emails for Createx Studio. Switch to HTML or Pug tab to see code example and instructions.

Subscribe

*Subscribe to our newsletter to receive early discount offers, updates and new products info. 
<!-- Widget: Subscription (MailChimp Ajax)
        Instructions how to get MailChimp action link:
        1. Go to MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
        2. In the provided code find form action link and copy it
        3. Paste it to the form action attribute below
        4. Replace post? part with post-json? to enable ajax subscription
        5. Change method from 'post' to 'get'
-->
<div class="widget">
  <h3 class="widget-title">Subscribe</h3>
  <form class="validate" action="mailchimp-embedded-form-atcion-link" method="get" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form">
    <div class="input-group input-group-overlay flex-nowrap">
      <div class="input-group-prepend-overlay">
        <span class="input-group-text text-muted font-size-base">
          <i class="czi-mail"></i>
        </span>
      </div>
      <input class="form-control prepended-form-control" type="email" name="EMAIL" id="mce-EMAIL" value="" placeholder="Your email" required>
      <div class="input-group-append">
        <button class="btn btn-primary" type="submit" name="subscribe" id="mc-embedded-subscribe">Subscribe*</button>
      </div>
    </div>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true">
      <input type="text" name="b_c7103e2c981361a6639545bd5_29ca296126" tabindex="-1">
    </div>
    <small class="form-text text-muted" id="mc-helper">*Subscribe to our newsletter to receive early discount offers, updates and new products info.</small>
    <div class="subscribe-status"></div>
  </form>
</div>
// Widget: Subscription (MailChimp Ajax)
// Instructions how to get MailChimp action link:
// 1. Go to MailChimp Dashboard / Audience / Manage Audience / Signup forms / Embedded forms
// 2. In the provided code find form action link and copy it
// 3. Paste it to the form action attribute below
// 4. Replace post? part with post-json? to enable ajax subscription
// 5. Change method from 'post' to 'get'
form(action="mailchimp-embedded-form-atcion-link", method="get", name="mc-embedded-subscribe-form")#mc-embedded-subscribe-form.validate
  .input-group.input-group-overlay.flex-nowrap
    .input-group-prepend-overlay
      span.input-group-text.text-muted.font-size-base
        i.czi-mail
    input(type="email", name="EMAIL", id="mce-EMAIL", placeholder="Your email", required).form-control.prepended-form-control
    .input-group-append
      button#mc-embedded-subscribe.btn.btn-primary(type="submit", name="subscribe") Subscribe*
  // real people should not fill this in and expect good things - do not remove this or risk form bot signups
  div(style='position: absolute; left: -5000px;' aria-hidden='true')
    input(type="text", name="b_c7103e2c981361a6639545bd5_29ca296126" tabindex="-1")
  small#mc-helper.form-text.text-muted *Subscribe to our newsletter to receive early discount offers, updates and new products info.
  .subscribe-status
Top