<form>
  <input id="name" type="text" class="field-icon" placeholder="&#xf007; &nbsp; Your Name" />
  <input id="email" type="text" class="field-icon" placeholder="&#xf0e0; &nbsp; Email Address" />
  <textarea id="message" type="text" class="field-icon" placeholder="&#xf075; &nbsp; Comments"></textarea>
  <input id="submit" type="submit" value="Submit" />
</form>
@import url(https://fonts.googleapis.com/css?family=Muli:100,300,400);

body {
	font-family: 'Muli', sans-serif;
	background: #f0f0f0;
	color: #b3aca7;
}

form {
	position: relative;
	width: 500px;
	margin: 50px auto 100px auto;
}

input {
	font-family: 'Muli', sans-serif;
	font-size: 0.875em;
	width: 470px;
	height: 50px;
	padding: 0px 15px 0px 15px;
	background: #ffffff;
	outline: none;
	color: #726659;
	border: solid 1px #b3aca7;
	border-bottom: none;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
}
	input:hover { background: #f2f2f2; }

textarea {
	width: 470px;
	max-width: 470px;
	height: 110px;
	max-height: 110px;
	padding: 15px;
	background: #ffffff;
	outline: none;
	color: #726659;
	font-family: 'Muli', sans-serif;
	font-size: 0.875em;
	border: solid 1px #b3aca7;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
}
	textarea:hover { background: #f2f2f2; }

#submit {
	width: 502px;
	padding: 0;
	margin: 5px 0px 0px 0px;
	font-family: 'Muli', sans-serif;
	font-size: 0.875em;
	color: #b3aca7;
	outline:none;
	cursor: pointer;
	border: solid 1px #b3aca7;
	text-transform: uppercase;
}

.field-icon { font-family: 'Muli', FontAwesome, sans-serif; }
Rerun