CSS Contact form Easy

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

Demo:

Contact Us

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>Contact Us</h1>
<form>
  <input type="text" placeholder="Name" id="Name">  
  <input type="text" placeholder="Email" id="Email">
  <input type="text" placeholder="Phone" id="Phone">  
  <textarea name="message" cols="22" rows="5" placeholder="Your message here..." id="Message"></textarea>
    <input type="submit" value="Submit">
</form>
</div>

</body>
</html>

CSS code:

/* CSSTerm.com CSS Contact form Postcard */

.contact { 
	height:340px;
	width:250px;
	margin:auto;
	border:1px #5B7F34 solid;
	padding:10px;
	text-align: center;
	background-color: #fecd0d;
	font-family:Tahoma, Geneva, sans-serif
}

.contact input, .contact textarea { 
	padding:5px;
	margin:5px;
	background-color: #f6d7c1;
	border:2px solid #f57c24;
	width:240px;
}

.contact input[type="submit"],
.contact input[type="reset"]  {
  background-color : #f57c24;
  color : #fff;
  border : 2px solid #76A544;
  float:right;
  width:240px;
}

Previous page: CSS Simple Contact Form

Next page: CSS Contact form Postcard