This is a jQuery plugin to simplify work with MailChimp forms. (inspired by ajaxChimp)
- Download jquery-mailchimp.min.js and add to your project
- Include it in your template:
<script src="/your/project/path/js/jquery-mailchimp.min.js"></script>
Make sure you have jQuery v1.9+ included in your project
Using jquery-mailchimp you can refactor the code in following way:
Example
- <!-- Begin MailChimp Signup Form -->
- <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
- <style type="text/css">
- #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
- </style>
- <div id="mc_embed_signup">
- <form action="https://github.us16.list-manage.com/subscribe/post?u=21d66d0fb5dc3af7cb8a859fa&id=5b10837812"
- method="post" id="mc-embedded-subscribe-form"
- name="mc-embedded-subscribe-form" class="validate"
- target="_blank" novalidate>
- <div id="mc_embed_signup_scroll">
- <h2>Subscribe to our mailing list</h2>
- <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
- <div class="mc-field-group">
- <label for="mce-EMAIL">Email Address </label>
- <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
- </div>
- <div class="mc-field-group">
- <label for="mce-FULLNAME">Full Name </label>
- <input type="text" value="" name="FULLNAME" class="" id="mce-FULLNAME">
- </div>
- <div id="mce-responses" class="clear">
- <div class="response" id="mce-error-response" style="display:none"></div>
- <div class="response" id="mce-success-response" style="display:none"></div>
- </div>
- <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="xxx" tabindex="-1" value=""></div>
- <div class="clear">
- <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
- </div>
- </form>
- </div>
+ <form id="subscribe-form">
+ <div class="mc-form-group-EMAIL">
+ <input type="mail" 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>
+ <button id="submit-form">Subscribe</button>
+ </form>
- <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script type='text/javascript'>
- (function($) {
- window.fnames = new Array();
- window.ftypes = new Array();
- fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FULLNAME';ftypes[1]='text';
- }(jQuery));
- var $mcj = jQuery.noConflict(true);
+ $('#subscribe-form').MailChimpForm({
+ url: '//github.us16.list-manage.com/subscribe/post?u=21d66d0fb5dc3af7cb8a859fa&id=5b10837812',
+ fields: '0:EMAIL,1:FULLNAME',
+ submitSelector: '#submit-form'
+ });
</script>
- <!--End mc_embed_signup-->Just pick minimal required data as:
- Form action:
//github.us16.list-manage.com/subscribe/post?u=21d66d0fb5dc3af7cb8a859fa&id=5b10837812 - Transform array of
fnamesinto coma separated<KEY>:<VALUE>string like:0:EMAIL,1:FULLNAME
And you are ready to use jquery-mailchimp!
- Compound your custom form by adding wrappers to the all of your inputs with class
mc-form-group-+INPUT_NAME. And add an error placeholder inside your wrapper<div class="mc-error"></div>to show validation errors:
<div class="mc-form-group-FULLNAME">
<input type="text" name="FULLNAME" placeholder="Full name">
<div class="mc-error"></div>
</div>-
Add submit button
<button id="submit-form">Subscribe</button> -
Initialize the plugin:
$('#subscribe-form').MailChimpForm({
url: '//github.us16.list-manage.com/subscribe/post?u=21d66d0fb5dc3af7cb8a859fa&id=5b10837812',
fields: '0:EMAIL,1:FULLNAME',
submitSelector: '#submit-form'
});- Enjoy!
$('#your-form-id').MailChimpForm({
url: <String>, # default: form="action"
fields: <String>, # default: ''
inputSelector: <String>, # default: 'input'
errorSelector: <String>, # default: '.mc-error'
submitSelector: <String>, # default: '',
onFail: <Function>, # default: function(message) { console.log(message) }
onOk: <Function>, # default: function(message) { console.log(message) }
customMessages: <Object>, # default: {}
});
mc:input:error- fired on validation errormc:input:ok- fired on validation succeeded
E001 => Input is empty
E002 => Wrong date
E003 => No @ sign in email
E004 => Invalid email address
E005 => Too many subscribe attempts
S001 => Email confirmation step
We need your help here, in case you have caught a response which is not in the list, please open your console and open an issue with details.
Please check our demo to see how it works, btw you can subscribe and we will let you know about plugin updates 😉
- If you are facing some issues - don't hesitate to open an issue
- If you have an idea how to improve this module, feel free to contribute or open an issue with
enhancementlabel
This repository can be used under the MIT license.
See LICENSE for more details.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent