CSS Contact form Postcard

CSS Contact form Postcard, compatible with all major browsers. Pure CSS no images or javascript.

Demo:

Send Us A Message

How to use:

Open text editor like Notepad or any other.
Copy HTML code and paste into the text editor.
Save file as anyname.html or anyname.htm
Create new document.
Copy and paste CSS code into text editor.
Save file as contact.css

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="contact.css" />
<title>CSS Contact form Postcard</title>
</head>
<body>

<div class="contact">
<h1>Send Us A Message</h1>
<form>
  <p>Name: </p><input type="text" id="Name">
  <p>Email: </p><input type="text" id="Email">
  <p>Phone: </p><input type="text" id="Phone">  
  <p>Message: </p><textarea name="message" cols="22" rows="5" id="Message"></textarea>
    <input type="submit" value="Submit">
</form>
</div>

</body>
</html>

CSS code:

/* CSSTerm.com CSS Contact form Postcard */

.contact { 
	height:330px;
	width:300px;
	margin:auto;
	border:6px #5B7F34 dashed;
	padding:10px;
	background-color: #F9F4E6;
	font-family:Tahoma, Geneva, sans-serif;
}

.contact h1 {
	text-align:center;
	margin:20px 0px;
	font-size:30px;
	color:#5B7F34;
}

.contact p {
	display: inline-block;
	vertical-align:top;
	margin:7px;
}

.contact input, .contact textarea { 
	padding:5px;
	margin:5px;
	background-color: #F9F4E6;
	border:none;
	border-bottom:2px #5B7F34 dotted;
	width:220px;
}

.contact textarea { 
	width:200px;
}

.contact input[type="submit"] {
  background-color : #5B7F34;
  color : #fff;
  border : 2px solid #76A544;
  float:right;
}

Previous page: CSS Contact form Easy

Next page: CSS Contact form Letter