Bootstrap contact form

Chapter 4 of my book : https://leanpub.com/frontend

by redoak2000

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/superhero/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/spinjs/1.3.0/spin.min.js"></script>
<script src="http://fgnass.github.io/spin.js/jquery.spin.js"></script>
<script src="//cdn.jsdelivr.net/humane.js/3.1.0/humane.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/humane.js/3.1.0/themes/jackedup.css">
<div class="container">
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <div class="well well-sm">
      <form id="contact-form" class="form-horizontal" action="/echo/json/" method="post">
      <fieldset>
        <legend class="text-center">Contact us</legend>
        <div id="success-container" class="text-center" style="display:none;">
          <p class="lead text-success"><span class="glyphicon glyphicon-ok"></span></p>
          <p class="lead">Your message has been sent successfully!</p>
        </div>

        <div id="form-container">

          <!-- Name input-->
          <div class="form-group">
            <label class="col-md-3 control-label" for="name">Name</label>
            <div class="col-md-9">
              <input id="name" name="name" type="text" placeholder="Your name" class="form-control">
            </div>
          </div>

          <!-- Email input-->
          <div class="form-group">
            <label class="col-md-3 control-label" for="email">Your E-mail</label>
            <div class="col-md-9">
              <input id="email" name="email" type="text" placeholder="Your email" class="form-control">
            </div>
          </div>

          <!-- Message body -->
          <div class="form-group">
            <label class="col-md-3 control-label" for="message">Your message</label>
            <div class="col-md-9">
              <textarea class="form-control" id="message" name="message" placeholder="Please enter your message here..."...

CSS

body{padding-top:70px;}

JavaScript

// Wait for the HTML document to be loaded completely
$(function() {

  // Retrieve DOM elements and store them
  var contactForm     = $('#contact-form');
  var spinArea        = $('#spin-area'); 
  var formContainer   = $('#form-container');
  var successContainer= $('#success-container');
    
  contactForm.submit(function(e){
    e.preventDefault();
    
    spinArea.spin('large'); // Attach the spinner
    
    // Send a POST AJAX request to the URL of form's action
    $.ajax({
      type: "POST",
      url: contactForm.attr('action'),
      data: contactForm.serialize(),
      dataType: "json"
    })
    .done(function(response) {
      humane.log('Message sent',{ addnCls: 'humane-jackedup-success'});
      successContainer.fadeIn();
      formContainer.slideUp();
    })
    .fail(function () {
      // Sending request to the server has failed
      // We'll show a notification that something went wrong
    })
    .always(function() {
      spinArea.spin(false); // Remove the spinner
    });
  });

});