<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>
No comments:
Post a Comment