form

Style 1

Style 2

		
<h3 class="sc-sub-title">Style 1</h3>
<form action="../mail.php">
  <div class="input-box transparent"><input type="text" placeholder="Name*" name="name"></div>
  <div class="input-box transparent"><input type="text" placeholder="Email*" name="email"></div>
  <div class="input-box transparent"><input type="text" placeholder="Subject" name="subject"></div>
  <div class="input-box transparent"><textarea name="message" placeholder="Message"></textarea></div>
  <div class="input-box submit-box width-full"><input type="submit" class="button large" value="send"></div>
</form>

<h3 class="sc-sub-title">Style 2</h3>
<form action="../mail.php">
  <div class="input-box">
   <label for="name">Name*</label>
   <input type="text" name="name" id="name">
  </div>
  <div class="input-box">
   <label for="email">Email*</label>
   <input type="text" name="email" id="email">
  </div>
  <div class="input-box">
   <label for="subject">Subject</label>
   <input type="text" name="subject" id="subject">
  </div>
  <div class="input-box">
    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>
  </div>
  <div class="input-box submit-box width-full">
    <input type="submit" class="button large" value="send">
  </div>
</form>
		
	
		
/* Form Input */
.input-box {
  float: left;
  margin-bottom: 18px;
  width: 100%;
}
.input-box:last-child {
  margin-bottom: 0;
}
.input-box-2 {
  margin-left: -15px;
  margin-right: -15px;
}
.input-box-2 .input-box {
  display: block;
  float: left;
  margin-left: 0;
  margin-right: 0;
  padding-left: 15px;
  padding-right: 15px;
  width: 50%;
}
.input-box-2 .input-box:last-child {
  margin-bottom: 18px;
}
.input-box label {
  color: #303030;
  display: block;
  font-weight: 500;
  line-height: 12px;
  margin-bottom: 10px;
  text-align: left;
}
.input-box input, .input-box textarea, .input-box select {
  background: #fff none repeat scroll 0 0;
  border: 1px solid #eee;
  color: #909090;
  font-size: 12px;
  font-weight: 300;
  height: 44px;
  padding: 5px 12px;
  text-align: left;
  width: 100%;
}
.input-box select {
  appearance: none;
  -moz-appearance: none;
  background: #fff url("img/icon/select-arrow.png") no-repeat scroll right center;
  font-size: 14px;
}
.input-box.transparent input, .input-box.transparent textarea , .input-box.transparent select {
  background-color: transparent;
}
.input-box textarea {
  min-height: 106px;
}
.input-box input:focus, .input-box textarea:focus {
  color: #303030;
}
.submit-box {
  width: auto;
}
.submit-box input {
  border: medium none;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 37px;
  padding: 0 36px;
  text-align: center;
  text-transform: uppercase;
  width: auto;
}
.submit-box.width-full {
  width: 100%;
}
.submit-box.width-full input {
  width: 100%;
}
.submit-box input:hover {
  background: #303030 none repeat scroll 0 0;
  color: #fff;
}
		
	

Style Switcher

Select Layout
Chose Color
Chose Pattren
Chose Background