simple-contact-form

Simple contact form with Font Awesome

by Karla Jaramillo

HTML

<body>
    
	<h1>Simple Contact Form</h1>

	<!-- Contact Form -->

	<form action="#" method="post">

		<fieldset class="contact-form">

			<input type="text" name="name" placeholder="Name" required>
			<input type="email" name="email" placeholder="Email address" required>
			<input type="text" name="subject" placeholder="Subject" required>
			<textarea name="message" placeholder="Add your message here" required></textarea>
			<input type="submit" id="submit" value="Submit" >
		  
		</fieldset>

	</form>

</body>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400|Pacifico);

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/*
  ==============================
  Custom styles
  ==============================
*/

body {
  color: #bfbfbf;
  font-family: 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: rgba(245,245,245,1);
}

h1 {
  font-family: 'Pacifico', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align: center;
  text-shadow: 2px 2px 0px rgba(255,255,255,.7), 5px 7px 0px rgba(0, 0, 0, 0.1);
}

form {
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.contact-form input,
.contact-form textarea {
  border: 0;
  outline: 0;
  display: block;
  width: 100%;
  margin-top: 1em;
  padding: .8em;
  font-family: 'Lato', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  border-radius: 6px;
  box-shadow: 0 1px 1px rgba(34,34,34,0.1);
  resize: none;
}

.contact-form textarea {
  margin-bottom: 1em;
  height: 125px;
}

.contact-form input:focus {
  box-shadow: 0 0px 2px rgba(3,201,169,1)!important;
}

.contact-form textarea:focus {
  box-shadow: 0 0px 2px rgba(3,201,169,1)!important;
} 

#submit {
  color: white; 
  background-color: #bfbfbf;
  cursor: pointer;
  font-weight: 400;
}
    
#submit:hover {
  background-color: rgba(3,201,169,.6);
}