Just Form
HTML
<form class="form">
<h1>Contact me</h1>
<div class="field">
<input class="input-text" id="name" type="text" required />
<label class="label" for="name">Full Name</label>
</div>
<div class="field">
<input class="input-text" id="email" type="text" required />
<label class="label" for="email">E-mail</label>
</div>
<div class="field">
<input class="input-text" id="tel" type="text" />
<label class="label" for="tel">Telephone</label>
</div>
<div class="field">
<textarea class="input-textarea" id="message" required></textarea>
<label class="label" for="message">Message</label>
</div>
<div class="field">
<button class="button" id="submit" type="submit">SUBMIT</button>
<button class="button" id="reset" type="reset">Cancel</button>
</div>
</form>
CSS
* {
box-sizing: border-box;
}
.form {
max-width: 600px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
}
.form .field {
position: relative;
margin-top: 2em;
}
.form .field .label {
position: absolute;
top: 1.1em;
left: 12px;
margin-top: -0.5em;
transition: 300ms;
cursor: text;
color: #333;
}
.form .input-text {
width: 100%;
line-height: 32px;
border: 1px solid #ccc;
font-size: 14px;
padding: 0 12px;
background-color: #fff;
}
.form .input-text:focus + .label,
.form .input-text.texted + .label {
top: -1.5em;
left: 0;
margin-top: 0;
font-size: 12px;
color: #666;
text-shadow: 1px 1px 0 #fff;
}
.form .input-text.texted {
border-color: deepskyblue;
}
.form .input-textarea {
width: 100%;
height: 100px;
background-color: #fff;
border: 1px solid #ccc;
padding: 9px 12px;
}
.form .input-textarea.texted {
border-color: deepskyblue;
}
.form .input-textarea:focus + .label,
.form .input-textarea.texted + .label {
top: -1.5em;
left: 0;
margin-top: 0;
font-size: 12px;
color: #666;
text-shadow: 1px 1px 0 #fff;
}
.form .button {
width: 100px;
height: 32px;
line-height: 32px;
border: 0;
text-align: center;
color: #fff;
cursor: pointer;
}
.form #submit {
background-color: tomato;
}
.form #reset {
background-color: transparent;
color: #666;
}
JAVASCRIPT
jQuery(function($) {
$('.form').on('change', function(event) {
var element = event.target;
if( $(element).val() !== '' ) {
$(element).addClass('texted');
} else {
$(element).removeClass('texted');
}
}).trigger('change');
$('#reset').on('click', function() {
$('.form').children('.input-text').removeClass('texted');
});
});
