form with floating label input

by kompiajaib

HTML

<form action="#" method="POST" name="sentMessage" id="contactForm">
  <div class="floating-label-form-group">
    <label>Name</label>
    <input type="text" class="form-control" placeholder="Name" id="name" name="name" required="required">
  </div>
  <div class="floating-label-form-group">
    <label>Email Address</label>
    <input type="email" class="form-control" placeholder="Email Address" id="email" name="_replyto" required="required">
  </div>
  <div class="floating-label-form-group">
    <label>Subject</label>
    <input type="text" class="form-control" placeholder="Subject" id="subject" name="_subject" required="required">
  </div>
  <div class="floating-label-form-group">
    <label>Message</label>
    <textarea rows="5" class="form-control" placeholder="Message" id="message" required="required"></textarea>
  </div>
  <button type="submit" class="btn btn-default">Send</button>
</form>

CSS

#contactForm .floating-label-form-group {
  font-size: 14px;
  position: relative;
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

#contactForm .floating-label-form-group.floating-label-form-group-with-focus {
  position: relative;
}

#contactForm .floating-label-form-group:before {
  display: block;
  position: absolute;
  right: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  background-color: #0400bf;
  content: "";
  transition: width 0.4s ease-in-out;
}
#contactForm .floating-label-form-group:after {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 2px;
  background-color: #0400bf;
  content: "";
  transition: width 0.4s ease-in-out;
}
#contactForm .floating-label-form-group.floating-label-form-group-with-focus:before,#contactForm .floating-label-form-group.floating-label-form-group-with-focus:after {
  width: 50%;
}

#contactForm .floating-label-form-group input,
#contactForm .floating-label-form-group textarea {
  z-index: 1;
  position: relative;
  padding-right: 0;
  padding-left: 0;
  border: none;
  border-radius: 0;
  font-size: 18px;
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: lighter;
  background: none;
  box-shadow: none !important;
  resize: none;
}

#contactForm .floating-label-form-group label {
  display: block;
  z-index: 0;
  position: relative;
  top: 2em;
  margin: 0;
  font-size: 12px;
  font-family: "Helvetica", "Arial", sans-serif;
  font-weight: lighter;
  line-height: 1.764705882em;
  vertical-align: middle;
  vertical-align: baseline;
  opacity: 0;
  -webkit-transition: top 0.3s ease, opacity 0.3s ease;
  -moz-transition: top 0.3s ease, opacity 0.3s ease;
  -ms-transition: top 0.3s ease, opacity 0.3s ease;
  transition: top 0.3s ease, opacity 0.3s ease;
}

#contactForm .floating-label-form-group::not(:first-child) {
  padding-left: 14px;
  border-left: 1px solid #eeeeee;
}

#contactForm .floating-label-form-group-with-value label {
  top:...

JavaScript

$(function() {
  $("body").on("input propertychange", ".floating-label-form-group", function(e) {
    $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());
  }).on("focus", ".floating-label-form-group", function() {
    $(this).addClass("floating-label-form-group-with-focus");
  }).on("blur", ".floating-label-form-group", function() {
    $(this).removeClass("floating-label-form-group-with-focus");
  });
});