KyleNumann
8/27/2015 - 9:50 PM

Web form label styles and auto-highlighting, label animation moved above inp

Web form label styles and auto-highlighting, label animation moved above inp

Form label placeholder animation
content_copyfile_download
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Form</title>
</head>

<body>

	<form class="contact-form" action="/">
		<h3>I am form, fill me out</h3>
		<div>
			<label for="first_name">First Name *</label>
			<input type="text" id="first_name" name="first_name" required>
		</div>
		<div>
			<label for="last_name">Last Name *</label>
			<input type="text" id="last_name" name="last_name" required>
		</div>
		<div>
			<label for="company">Company *</label>
			<input type="text" id="company" name="company" required>
		</div>
		<div>
			<label for="email">Email *</label>
			<input type="email" id="email" name="email" required>
		</div>
		<input class="cta form-button" type="submit" value="Submit">
	</form>
 
</body>


<style>


body {
	font-family:sans-serif;
	font-size:16px;
}
.contact-form {
	position:relative;
	max-width:400px;
	margin:2em auto;
	background:rgba(0,0,0,0.05);
}
.contact-form label {
	font-size:0.8em;
	display:block;
	margin-bottom:0.2em;
	pointer-events:none;
}
.contact-form > div {
	position:relative;
}
.contact-form > div label {
	color: rgba(0,0,0,0.6);
	/* adjust this translate x and y to position label above input field */
	transform:translate(0.5em, 1.5em) scale(1.3);
	-moz-transform:translate(0.5em, 1.5em) scale(1.3);
	-webkit-transform:translate(0.5em, 1.5em) scale(1.3);
	transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-webkit-transform-origin: 0% 0%;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}
.contact-form > div.filled label {
	transform:translate(0, 0) scale(1);
	-moz-transform:translate(0, 0) scale(1);
	-webkit-transform:translate(0, 0) scale(1);
}
.contact-form input[type=text], .contact-form input[type=email] {
	display:block;
	background:transparent;
	border-width:0 0 1px 1px;
	border-color:#000;
	margin-bottom:0.4em;
	width:100%;
	padding:0.2em 0.3em;
	min-height:1.4em;
	font-size:1em;
}
.show-alert .contact-form > div.active:before {
	content:"";
	width: 0; 
	height: 0; 
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #d21e28;
	position:absolute;
	left:-3em;
	top:1.4em;
	animation: movingbox 2s infinite;
	-moz-animation: movingbox 2s infinite;
	-webkit-animation: movingbox 2s infinite;
}
.contact-form .cta {
	display:block;
	width:100%;
	text-align:center;
	padding:0.4em;
	border:0;
	margin-top:1.4em;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
}

@keyframes movingbox{
  0%{
  	transform:translateX(0);
	-moz-transform:translateX(0);
	-webkit-transform:translateX(0);
  }
  50%{
  	transform:translateX(-1em);
	-moz-transform:translateX(-1em);
	-webkit-transform:translateX(-1em);
  }
  100%{
  	transform:translateX(0);
	-moz-transform:translateX(0);
	-webkit-transform:translateX(0);
  }
}
@-moz-keyframes movingbox{
  0%{
  	transform:translateX(0);
	-moz-transform:translateX(0);
	-webkit-transform:translateX(0);
  }
  50%{
  	transform:translateX(-1em);
	-moz-transform:translateX(-1em);
	-webkit-transform:translateX(-1em);
  }
  100%{
  	transform:translateX(0);
	-moz-transform:translateX(0);
	-webkit-transform:translateX(0);
  }
}
@-webkit-keyframes movingbox{
  0%{
  	transform:translateX(0);
	-moz-transform:translateX(0);
	-webkit-transform:translateX(0);
  }
  50%{
  	transform:translateX(-1em);
	-moz-transform:translateX(-1em);
	-webkit-transform:translateX(-1em);
  }
  100%{
  	transform:translateX(0);
	-moz-transform:translateX(0);
	-webkit-transform:translateX(0);
  }
}

</style>



<!-- JQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
	$(document).ready(function() {
				contactForm = $('#contact-form');
				$('.form-button').click(
					function(){
						$(contactForm).addClass('show-alert');
						
				});
			    $('label + input').focus(
				    function(){
				        $(this).parent().addClass('active filled');
				});

			    $('label + input').blur(
				    function(){
				    	$(contactForm).removeClass('show-alert');
				    	$(this).parent().removeClass('active');
				    	if($(this).val().length === 0){
				        	$(this).parent().removeClass('filled');
				    	}
			    });
			});
</script>



</html>