CSS Contact form Dotted

A simple, cross browser compatible CSS contact form Dotted using images, no javascript.

Form features:

no javascript required;
easy to customize;
easy to implement;
cross-browser compliant;

Demo:

Contact Form

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 Dotted</title>
</head>
<body>

<div class="contact">
<p>Contact Form</p>
<form>
  <div class="c_name"><input type="text" placeholder="(enter your name)" id="Name"></div>
  <div class="c_email"><input type="text" placeholder="(email address)" id="Email"></div>
  <div class="c_phone"><input type="text" placeholder="(your phone number)" id="Phone"></div>
  <div class="c_text"><textarea name="message" rows="5" placeholder="(Your message here...)" id="Message"></textarea></div>
  <input type="submit" value="Submit">
</form>
</div>

</body>
</html>

CSS code:

/* CSSTerm.com CSS Contact form Dotted */

.contact { 
	height:370px;
	width:370px;
	margin:auto;
	border:4px #5B7F34 dotted;
	padding:10px;
	font-family: Impact, Charcoal, sans-serif;
	font-size:25px;
	text-align:center;
	border-radius: 15px;
}

.c_name, .c_email, .c_phone, .c_text {
	width:39px;
	height:39px;
	margin:5px
}

.c_name {
	background:url('img/icon_name.jpg') no-repeat;
}

.c_email {
	background:url('img/icon_email.jpg') no-repeat;
}

.c_phone {
	background:url('img/icon_phone.jpg') no-repeat;
}

.c_text {
	background:url('img/icon_text.jpg') no-repeat;
}

.contact input, .contact textarea { 
	padding:10px;
	background-color: #fff;
	text-align:center;
	border:2px #fff solid;
	margin-left:39px;
	width:300px;
	border-radius: 5px;
	border:2px #5B7F34 dotted;
}

.contact textarea { 
	text-align:center;
	overflow:hidden;
}

.contact input[type="submit"] {
  background-color : #353841;
  color : #fff;
  border : 1px solid #76A544;
  float:right;
  margin-top:70px;
  margin-right:25px;
  width:70px;
}

Previous page: CSS Contact form Letter

Next page: CSS reset