Customizable Mailchimp Signup Form With jQuery - mailchimp.js

mailchimp.js is a lightweight jQuery plugin which has the ability to customize and ajaxify the MailChimp list signup form on the webpage.

Also provides a functionality to validate form fields with custom error messages on submit.

Creating for creating a Mailchimp subscription form to engage email subscribers.

How to use it:

1. Load the minified version of the jQuery mailchimp.js plugin after you've loaded jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery-mailchimp.min.js"></script>

2. Create a MailChimp list signup form on the web page.

<form id="subscribe-form">
  <div class="mc-form-group-EMAIL">
      <input type="email" name="EMAIL" placeholder="Email">
      <div class="mc-error"></div>
  </div>
  <div class="mc-form-group-FULLNAME">
      <input type="text" name="FULLNAME" placeholder="Full name">
      <div class="mc-error"></div>
  </div>
</form>
<button id="submit-form">Subscribe</button>

3. Initialize the signup form and specify the URL where to send the subsciption data.

$('#subscribe-form').MailChimpForm({
  url: '//jqueryscript.us6.list-manage.com/subscribe/post?u=d4d8a0f45ce17e5ef2708771f&id=06a33bc6c9',
  fields: '0:EMAIL,1:FULLNAME',
  submitSelector: '#submit-form'
});

4. Customize the error messages. Available response codes:

• E001: Input is empty
• E002: invalid date
• E003: No @ in email
• E004: Invalid email address
• E005: Too many subscribe attempts

$('#subscribe-form').MailChimpForm({
  url: '//jqueryscript.us6.list-manage.com/subscribe/post?u=d4d8a0f45ce17e5ef2708771f&id=06a33bc6c9',
  fields: '0:EMAIL,1:FULLNAME',
  submitSelector: '#submit-form',
  customMessages: {
    E001: 'This field can not be empty',
    E003: 'Please enter a valid email address',
  }
});

5. All default plugin options.

$('#subscribe-form').MailChimpForm({
  url: $form.attr('action'),
  fields: '',
  inputSelector: 'input',
  errorSelector: '.mc-error',
  submitSelector: '',
  customMessages: {}
});

6. Available callback functions.

$('#subscribe-form').MailChimpForm({
  onFail: (message) => {
    console.error(message);
  },
  onOk: (message) => {
    console.log(message);
  }
});

7. Event handlers.

const $formInput = $('input');

/**
 * @param element
 * @param {String} color
 */
function addBorder(element, color) {
  element.css({'border': `1px solid ${color}`});
}

/**
 * mc:input:error event handler
 */
$formInput.on('mc:input:error', function () {
  console.log('mc:input:error event fired');

  addBorder($(this), 'red');
});

/**
 * mc:input:ok event handler
 */
$formInput.on('mc:input:ok', function () {
  console.log('mc:input:ok event fired');

  addBorder($(this), 'green');
});

---

This awesome jQuery plugin is developed by ddimitrioglo. For more Advanced Usages, please check the demo page or visit the official website.