šŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A customizable MailChimp ajax plugin for jQuery, provides an easy and lightweight way to let your users sign up to your MailChimp list.Features:Customizable Error and Success messages.Ability to specify which element the output should be appended to, if it exists or where the element should be createdAutomatically transforms the mailchimp signup url in the JSONP formatChanges the value of the button if the response is successfulThis solution is language agnostic, only dependency is jQuery.is AJAX-enabled, but degrades gracefully if Javascript isn’t turned onMultiple sign-up forms, for multiple lists.

Ajax jSON Plugins

Documentation

jQuery FormChimp

A customizable MailChimp ajax plugin for jQuery, provides an easy and lightweight way to let your users sign up to your MailChimp list.

Features

  • Customizable Error and Success messages.
  • Ability to specify which element the output should be appended to, if it exists or where the element should be created
  • Automatically transforms the mailchimp signup url in the JSONP format
  • Changes the value of the button if the response is successful
  • This solution is language agnostic, only dependency is jQuery.
  • is AJAX-enabled, but degrades gracefully if Javascript isn't turned on
  • Multiple sign-up forms, for multiple lists.

Install

Choose one of the following methods:

Download source files

Git clone

git clone https://github.com/fabioquarantini/formchimp.git

Bower

bower install formchimp

Usage

  1. Create a form with the required attributes ( form action and input with name attribute. Where do i find them? )

    <form action="ADD MAILCHIMP URL">  	<label for="email">Email*:</label> 	<!-- Replace MERGE0 ( default for email ) with yours *|MERGE|* tags attribute --> 	<input id="email" name="MERGE0" type="email" value="" />  	<!-- Add any fields you want -->  	<button type="submit" value="Subscribe">Subscribe</button>  </form>
  2. Include jQuery:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  3. Include plugin's code:

    <script src="jquery.formchimp.js"></script>
  4. Call the plugin:

    $(".form-selector").formchimp();

Settings

FormChimp accepts settings from an object of key/value pairs.

Example:
$(".form-selector").formchimp({ 	key: value, 	key: value });

List of settings

appendElement:

Selector: Declare where the new element, containing the messages from Mailchimp will be appended to.

Default: $(this)

buttonSelector:

String: Set the button selector.

Default: $form.find('[type="submit"]')

buttonText:

String: The message to be written on the submit button after a successful subscription.

Default: ''

debug:

Boolean: Activate debug message in console.

Default: false

errorMessage:

String: Set custom error message given when return an error.

Default: ''

onMailChimpSuccess:

Function: Callback that fires on MailChimp success.

Default: function() {}

onMailChimpError:

Function: Callback that fires on MailChimp error.

Default: function() {}

responseClass:

Selector: Declare custom element in page for message output. (Set different classes for multiple sign-up forms)

Default: mc-response

successMessage:

String: Set a custom success message.

Default: ''

url:

String: The mailchip list subscription url, to get the JSONP address just change post to post-json and append &c=? at the end.

Default: form action attribute

Event Hooks

These event hooks fire at the same time as their corresponding callbacks (ie. onMailChimpSuccess & onMailChimpSuccess)

mailChimpSuccess : This event is triggered on Mailchip success

mailChimpError : This event is triggered on Mailchip errors

Example:
$( document ).on( 'mailChimpSuccess', function() { 	// Your code here });

License

MIT License Ā© Fabio Quarantini


You May Also Like