Customizable Mailchimp Signup Form With jQuery - mailchimp.js
File Size: | 10.5 KB |
---|---|
Views Total: | 2401 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.