Create A Simple Contact Form Using HTML/CSS


Feedback Form, Enquiry Form And Contact Form

#You are free to use my creation but give me credit.

--------------------------------------------------------------------------------------------------------------------------

Contact Form HTML Code:


<!DOCTYPE html>

<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;
}
--------------------------------------------------------------------------------------------------------------------------

Feedback Form/Contact Form 


           Preview                        Download




Post a Comment

0 Comments