Animated contact us page

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animated contact us form</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
        <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
        <link href="http://dev.see8ch.com/see8ch/v3/fonts/ss-social/ss-social.css" rel="stylesheet" />
        <link href="http://dev.see8ch.com/see8ch/v3/fonts/ss-standard/ss-standard.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
        <section id="hire">
            <h1>Contact Us</h1>
            <form action="#" method="post">
                <div class="field name-box">
                    <input type="text" id="name" placeholder="Your Name here"/>
                    <label for="name">Name</label>
                    <span class="ss-icon">check</span>
                </div>
                <div class="field email-box">
                    <input type="text" id="email" placeholder="username@email.com"/>
                    <label for="email">Email</label>
                    <span class="ss-icon">check</span>
                </div>
                <div class="field msg-box">
                    <textarea id="msg" rows="4" placeholder="Your message here"/></textarea>
                    <label for="msg">Msg</label>
                    <span class="ss-icon">check</span>
                </div>
                <input class="button" type="submit" value="Send" />
            </form>
        </section>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script type="text/javascript" src="main.js"></script>
    </body>
</html>

CSS

body {
    background: #efefef;
    font-size: 62.5%;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    color: #B6B6B6;
}
body section {
    background: white;
    margin: 60px auto 120px;
    border-top: 15px solid #313A3D;
    text-align: center;
    padding: 50px 0 110px;
    width: 80%;
    max-width: 1100px;
}
body section h1 {
    margin-bottom: 40px;
    font-size: 4em;
    text-transform: uppercase;
    font-family: "Lato", sans-serif;
    font-weight: 100;
}
form {
    width: 58.3333333333%;
    margin: 0 auto;
}
form .field {
    width: 100%;
    position: relative;
    margin-bottom: 15px;
}
form .field label {
    text-transform: uppercase;
    position: absolute;
    top: 0;
    left: 0;
    background: #313A3D;
    width: 100%;
    padding: 18px 0;
    font-size: 1.45em;
    letter-spacing: 0.075em;
    -webkit-transition: all 333ms ease-in-out;
    -moz-transition: all 333ms ease-in-out;
    -o-transition: all 333ms ease-in-out;
    -ms-transition: all 333ms ease-in-out;
    transition: all 333ms ease-in-out;
}
form .field label + span {
    font-family: "SSStandard";
    opacity: 0;
    color: white;
    display: block;
    position: absolute;
    top: 12px;
    left: 7%;
    font-size: 2.5em;
    text-shadow: 1px 2px 0 #cd6302;
    -webkit-transition: all 333ms ease-in-out;
    -moz-transition: all 333ms ease-in-out;
    -o-transition: all 333ms ease-in-out;
    -ms-transition: all 333ms ease-in-out;
    transition: all 333ms ease-in-out;
}
form .field input[type=text],
form .field textarea {
    border: none;
    background: #E8E9EA;
    width: 80.5%;
    margin: 0;
    padding: 18px 0;
    padding-left: 19.5%;
    color: #313A3D;
    font-size: 1.4em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
form .field input[type=text]#msg,
form .field textarea#msg {
    height: 18px;
    resize: none;
    -webkit-transition: all 333ms ease-in-out;
    -moz-transition: all 333ms ease-in-out;
    -o-transition: all 333ms ease-in-out;
    -ms-transition: all 333ms ease-in-out;
    transition: all 333ms ease-in-out;
}
form .field input[type=text]:focus, form .field input[type=text].focused,
form .field textarea:focus,
form .field textarea.focused {
    outline: none;
}
form .field input[type=text]:focus#msg, form .field input[type=text].focused#msg,
form .field textarea:focus#msg,
form .field textarea.focused#msg {
    padding-bottom: 150px;
}
form .field input[type=text]:focus + label, form .field input[type=text].focused + label,
form .field textarea:focus + label,
form .field textarea.focused + label {
    width: 18%;
    background: #FD9638;
    color: #313A3D;
}
form .field input[type=text].focused + label,
form .field textarea.focused + label {
    color: #FD9638;
}
form .field:hover label {
    width: 18%;
    background: #313A3D;
    color: white;
}
form input[type=submit] {
    background: #FD9638;
    color: white;
    -webkit-appearance: none;
    border: none;
    text-transform: uppercase;
    position: relative;
    padding: 13px 50px;
    font-size: 1.4em;
    letter-spacing: 0.1em;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    -webkit-transition: all 333ms ease-in-out;
    -moz-transition: all 333ms ease-in-out;
    -o-transition: all 333ms ease-in-out;
    -ms-transition: all 333ms ease-in-out;
    transition: all 333ms ease-in-out;
}
form input[type=submit]:hover {
    background: #313A3D;
    color: #FD9638;
}
form input[type=submit]:focus {
    outline: none;
    background: #cd6302;
}

Javascript

$('textarea').blur(function () {
    $('#hire textarea').each(function () {
        $this = $(this);
        if ( this.value != '' ) {
          $this.addClass('focused');
          $('textarea + label + span').css({'opacity': 1});
        }
        else {
          $this.removeClass('focused');
          $('textarea + label + span').css({'opacity': 0});
        }
    });
});

$('#hire .field:first-child input').blur(function () {
    $('#hire .field:first-child input').each(function () {
        $this = $(this);
        if ( this.value != '' ) {
          $this.addClass('focused');
          $('.field:first-child input + label + span').css({'opacity': 1});
        }
        else {
          $this.removeClass('focused');
          $('.field:first-child input + label + span').css({'opacity': 0});
        }
    });
});

$('#hire .field:nth-child(2) input').blur(function () {
    $('#hire .field:nth-child(2) input').each(function () {
        $this = $(this);
        if ( this.value != '' ) {
          $this.addClass('focused');
          $('.field:nth-child(2) input + label + span').css({'opacity': 1});
        }
        else {
          $this.removeClass('focused');
          $('.field:nth-child(2) input + label + span').css({'opacity': 0});
        }
    });
});