Contact Form

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<body>
  
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div id="ContactFormDiv"></div>
<form class="form" method="post" action="" name="contact" id="contact">
  <fieldset>
    <legend> Contact Form </legend>
 
          <div class="form-group has-feedback"> 
            <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
              <input type="text" class="form-control" id="name" name="name" placeholder="Name *" />
              <span class="form-control-feedback glyphicon"></span>
            </div>              
          </div>   
          
          <div class="form-group has-feedback">
            <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
              <input type="text" class="form-control" id="email" name="email" placeholder="E-Mail *"/>
              <span class="form-control-feedback glyphicon"></span>
            </div>   
          </div>
          
          <div class="form-group has-feedback">
            <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span>
              <input type="text" class="form-control" id="telefon" name="telefon" placeholder="Telefon"/> 
              <span class="form-control-feedback glyphicon"></span>  
            </div>
          </div>
          
          <div class="form-group has-feedback">
            <div class="input-group">
              <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
              <textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Nachricht*"></textarea>
            ...

JavaScript

$(document).ready(function(){
  
  $("form").validate({
        lang: 'de',
        rules: {
            name:{
                minlength: 3,
                maxlength: 30,
                required: true
            },
            email:{
                minlength: 3,
                maxlength: 20,
                required: true,
                email: true
            },
            telefon:{
                number: true
            }
        },
        highlight: function (element) {
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error')
            $(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            $(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
        },
        errorClass: 'help-block',
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length) {
              error.insertAfter(element.parent());
            } else {
              error.insertAfter(element);
            }
        },
        submitHandler: function() {
            var data = $("#contact").serialize();

            $.ajax({
               type	  : "POST",
               url 	  : "ajax/email.php",
               data    : data,
               success : function(q)
					{
                 $("#ContactFormDiv").html(q);
					}
            });
        }     
    }); 

    $('#cancel').on('click', function () {
        $("#contact").validate().resetForm();
        $("#contact").find(".has-error, .has-success, .glyphicon-ok, .glyphicon-remove").removeClass("has-error has-success glyphicon-ok glyphicon-remove");
    });
    
    });