Subscribing to a Campaign Monitor list using AJAX and a really basic animation on success

ajaxsubscribe.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="successMessage" style="display:none;">
    Thanks for signing up!
</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) {
                    if (data.Status === 400) {
                        alert("Error: " + data.Message);
                    } else { // 200
                        // #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() {
                            // #successMessage picks out the div that
                            // contains the success message so that we
                            // can animate it 
                            $('#successMessage').slideDown();
                        });
                }
            });
        });
    });
</script>

<!-- 4. You have an AJAX subscribe form! -->