Feedback Form, Enquiry Form And Contact Form
#You are free to use my creation but give me credit.
--------------------------------------------------------------------------------------------------------------------------Contact Form HTML Code:
<html >
<head>
<title>Contact Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page-wrap">
<h1 style="text-align: center; font-size: 40px">Contact Form</h1>
<div id="contact-area">
<form method="post" action="#">
<label for="Name">Name:</label>
<input type="text" name="Name" id="Name" placeholder="Name" />
<label for="City">City:</label>
<input type="text" name="City" id="City" placeholder="City" />
<label for="Email">Email:</label>
<input type="text" name="Email" id="Email" placeholder="Email" />
<label for="Message">Message:</label><br />
<textarea name="Message" rows="20" cols="20" id="Message"></textarea>
<input type="submit" name="submit" value="Send" class="submit-button" />
</form>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------
CSS CODE:
* {margin: 0;
padding: 0;
}
body {
font-size: 65%;
font-family: Helvetica, sans-serif;
background: #000;
}
#page-wrap {
width: 700px;
background: #fff;
padding: 70px 50px 20px 20px;
margin: 20px auto;
min-height: 500px;
height: auto !important;
height: 500px;
}
#contact-area {
width: 600px;
margin-top: 25px;
}
#contact-area input, #contact-area textarea {
padding: 5px;
width: 471px;
font-family: Helvetica, sans-serif;
font-size: 1.7em;
margin: 0px 0px 10px 0px;
border: 2px solid #ccc;
}
#contact-area textarea {
height: 90px;
}
#contact-area textarea:focus, #contact-area input:focus {
border: 2px solid #900;
}
#contact-area input.submit-button {
width: 100px;
float: right;
}
label {
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
padding-top: 5px;
font-size: 1.7em;
}
--------------------------------------------------------------------------------------------------------------------------
0 Comments