Subscribing to a Campaign Monitor list using AJAX and an animation for success or failure.

ajaxsubscribe_messagediv.html

<!-- 1. Take your Campaign Monitor subscribe form as generated from within your account: -->
 
<form action="http://myaccount.createsend.com/t/r/s/aljhk/" method="post" id="subForm">
    <div>
        <label for="name">Name:</label><br /><input type="text" name="cm-name" id="name" /><br />
        <label for="aljhk-aljhk">Email:</label><br /><input type="text" name="cm-aljhk-aljhk" id="aljhk-aljhk" /><br />
        <input type="submit" value="Subscribe" />
    </div>
</form>
 
<!-- 2. Add a success message -->
 
<div id="feedback" style="display:none;">
</div>
<!-- 3. And some JavaScript -->
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript">
    $(function () {
        $('#subForm').submit(function (e) {
            e.preventDefault();
            $.getJSON(
                this.action + "?callback=?",
                $(this).serialize(),
                function (data) {
                    var message;
                    if (data.Status === 400) {
                        message = "Eeek! Error: " + data.Message;
                    } else { // 200
                        message = "Good job, my friend.";
                    }
                    // #subForm picks the element which has
                    // an id of subForm (ie our form), and
                    // then we slide it up, over 400 milliseconds.
                    $('#subForm').slideUp(400, function() {
                        // #feedback picks out the div that
                        // will contain the message so that we
                        // can animate it 
                        $('#feedback')
                            .text(message) // changes the text content of the div
                            .slideDown();  // and then shows it
                    });
                });
        });
    });
</script>
 
<!-- 4. You have an AJAX subscribe form! -->