Mailchimp-it
Mailchimp-it is a small Javascript Library that turn a simple form into a working mailchimp form using a small PHP script as a dependency.
Getting started
Use the MailchimpIt.php script
My custom script use this Mailchimp PHP wrapper
to install it just
$ composer require drewm/mailchimp-api:dev-api-v3
$ composer install
Use your custom script
If you want to use your own script, because you want to implement your own logic,
or simply because you work with a language like Python ❤ , just take care with
the input's names, you can use the default field names, but if you wan't to use
your own names, don't forget to put them in the mailchimp-it configuration.
( function ( ) {
' use strict ' ;
mailchimpIt ( ' .yourForm ' , {
...
mailInputName : ' YOUR_CUSTOM_MAIL_FIELD_NAME ' ,
firstNameInputName : ' YOUR_CUSTOM_FIRST_NAME_FIELD_NAME ' ,
lastNameInputName : ' YOUR_CUSTOM_LAST_NAME_FIELD_NAME ' ,
...
} ) ;
} ( ) ) ;
HTML
First of all, you need to load mailchimp-it files
< link rel = " stylesheet " href = " dist/mailchimp-it.css " />
< script src = " dist/mailchimp-it.min.js " > < / script >
Then, prepare your form
< div class = " form-container " >
< form class = " test_form " method = " post " action = " src/MailchimpIt.php " >
< input type = " text " name = " newsletter_first_name " />
< input type = " text " name = " newsletter_last_name " />
< input type = " email " name = " newsletter_mail " required />
< button type = " submit " > subscribe </ button >
</ form >
</ div >
Javascript
Basic usage
( function ( ) {
' use strict ' ;
mailchimpIt ( ' .test_form ' ) ;
} ( ) ) ;
Mailchimp-it allow you to customize a lot of things
( function ( ) {
' use strict ' ;
mailchimpIt ( ' .test_form ' , {
successMessage : ' Thanks for subscribing ! ' ,
successMessageBefore : null ,
successMessageAfter : null ,
successMessageClassName : ' mailchimp-it-success ' ,
onSuccess : function ( ) {
return ;
} ,
errorMessageClassName : ' mailchimp-it-error ' ,
errorMessageBefore : null ,
errorMessageAfter : null ,
errorMessageTimeout : 5000 ,
onError : function ( ) {
return ;
} ,
mailInputName : ' newsletter_mail ' ,
firstNameInputName : ' newsletter_first_name ' ,
lastNameInputName : ' newsletter_last_name ' ,
loaderElt : null
} ) ;
} ( ) ) ;
Custom example
( function ( ) {
' use strict ' ;
mailchimpIt ( ' .test_form ' , {
successMessage : ' Thanks for subscribing, you \' ll be notified for the next update ! ' ,
successMessageBefore : ' <p>Hell Yeah !</p> ' ,
loaderElt : ' <p>Please Wait... <img src="img/myCustomLoader.gif"/></p> ' ,
onSuccess : muCustomFunction ( )
} ) ;
} ( ) ) ;
Want to use jQuery ?
No problem
( function ( $ ) {
' use strict ' ;
$ ( ' .test_form ' ) . mailchimpIt ( {
successMessage : ' Thanks for subscribing, you \' ll be notified for the next update ! ' ,
successMessageBefore : ' <p>Hell Yeah !</p> '
} ) ;
} ( jQuery ) ) ;