Animated Scemantic Contact Form

Animated Scemantic Contact Form .markdown

Animated Scemantic Contact Form

A Pen by Jacob Harris on CodePen.

License.

index.html

<form>
  <p>A responsive contact form, leveraging HTML5 input elements, CSS animated labels, and WAI-ARIA accessability features.</p>
  <div class="input-group">
    <label for="name" id="nameLabel">Name:</label>
    <input type="text" class="form-element" name="name" required aria-required="true" aria-describedby="nameLabel" >
  </div>
    <div class="input-group">
    <label for="phone" id="phoneLabel">Phone:</label>
    <input type="tel" class="form-element" name="phone" aria-describedby="phoneLabel">
  </div>
    <div class="input-group">
    <label for="email" id="emailLabel">Email:</label>
    <input type="email" class="form-element" name="email" requried aria-required="true" aria-describedby="emailLabel">
  </div>
  <div class="input-group">
    <label for="comments" id="commentsLabel">Comments:</label>
      <textarea  class="form-element" rows="8" name="comments" aria-describedby="commentsLabel"></textarea>
  </div>
  <input type="Submit" class="submit">
</form>

script.js

$(document).ready(function(){
  $('.form-element').focus(function(){
    $(this).siblings('label').addClass('focus');
  });
  $('.form-element').focusout(function(){
    if ($(this).val() === ''){
      $(this).siblings('label').removeClass('focus');
   }
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);

body{
  background:#1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-size:17PX;
  color:#fafafa;
}

form{
  width:60%;
  margin:0 auto;
}

label, input, textarea{
  display:block;
  background:transparent;
  width:100%;
  padding-left:15px;
  padding-bottom:10px;
  padding-top:10px;
}

label, input {
  height:30px;
}


label {
  font-weight:700;
  transition: all 0.2s ease;
  transform:translate(0px,55px);
  z-index:1;
  position:relative;3
}

label.focus{
  transform:translate(0,10px);
  color:#777777;
}

input, textarea{
  border:0 none;
  border-bottom:1px solid #fafafa;
  color: #fafafa;
  font-size:17px;
  font-weight:bold;
  background:transparent;
  z-index:2;
  position:relative;
  transition:background 0.2s ease;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
    background:rgba(255,255,255,0.1);
}

textarea{
  resize:none;
}

input.submit {
  font-family: 'Montserrat', sans-serif;
  font-size:17px;
  color:#fafafa;
  width:50%;
  margin:15px auto;
  border: 5px solid #fafafa;
  height:initial;
  cursor:pointer;
  transition:background-color 0.2s ease, border-color 0.2s ease;
}
input.submit:hover{
  background-color:#777777;
  border-color:#777777;
}