Tuesday, 30 July 2013

HTML contact page form


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
   background: #f2f2f2;
   color: #262626;
   font-family: Arial, san-serif;
}
#contact-form {
   background-color: #cb3d55;
   width: 465px;
   padding: 20px;
   margin: 50px auto;
   border-radius: 12px;  
   -moz-border-radius: 12px;
   -webkit-border-radius: 12px;
}
 
#contact-form input, 
#contact-form select, 
#contact-form textarea, 
#contact-form label {
   font-size: 15px;
   margin-bottom: 2px;
   font-family: Arial, san-serif;
}
 
#contact-form input, 
#contact-form select, 
#contact-form textarea {
   width: 450px;
    height: 29px;
  margin: 0;
  padding: 0 8px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
   margin: 2px 0 25px 0;
   padding: 5px;
}
#contact-form input:hover, 
#contact-form select:hover, 
#contact-form textarea:hover { border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); }
 
#contact-form input:focus, 
#contact-form select:focus, 
#contact-form textarea:focus {
   outline: none;
  border: 1px solid #4d90fe;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);

}
 
#contact-form textarea {
   height: 150px; 
}

#contact-form #submit {
   width: 450px; 
   color: #0000;
   border: none;
   background-color: #f6f6f6;
}
 
#contact-form #submit:hover {
   background-color: #c33754;
   color: #ffffff;
}
input:required, textarea:required {
   box-shadow: none;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   -o-box-shadow: none;
}

#contact-form .required {
   font-weight:bold;
   color: #E5E6E7;    
}
#failure, #success {
   color: #6EA070;
   display:none;
}


</style>
  
</head>

<body>
        <div id="contact-form">
   <h1>Get In Touch!</h1>
   <h2>Use this contact form below to get in touch.</h2>
   <p id="failure">Opss.. something went wrong.</p>
   <p id="success">Thank you, your message was sent successfully.</p>
   <form method="post" action="emailForm.php" name="">
      <label for="name">Name: <span class="required">*</span></label>
      <input type="text" id="name" name="name" value="" placeholder="Your name" required autofocus />
        
      <label for="email">Email Address: <span class="required">*</span></label>
      <input type="email" id="email" name="email" value="" placeholder="your@email.com" required />
        
      <label for="website">Website: </label>
      <input type="web" id="webstie" name="website" value="" />
        
      <label for="subject">Subject: </label>
      <select id="subject" name="subject"> 
         <option value="hello">I just want to say hello =]</option>
                  <option value="general">General</option> 
      </select>
        
      <label for="message">Message: <span class="required">*</span></label>
      <textarea id="message" name="message" placeholder="Please, Write your message here." required></textarea>
         
      <input type="submit" value="Submit" id="submit" />
   </form>
</div>
   
</body>
</html>