CSS Contact form Letter

You are here: Home » CSS forms » CSS Contact forms » CSS Contact form Letter 

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

Demo:

Hello, Name

My name is: and

my email is:

and phone:

I have a message for you:

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

<div class="contact">
<p>Hello, Name</p>
<form>
  <p>My <strong>name is: </strong><input type="text" placeholder="(enter your name)" id="Name"> and</p>
  <p>my <strong>email </strong>is: <input type="text" placeholder="(email address)" id="Email"></p>
  <p>and <strong>phone: </strong><input type="text" placeholder="(your phone number)" id="Phone"></p>
  <p>I have a <strong>message</strong> for you: </p>
  <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 Letter */

.contact { 
	height:330px;
	width:400px;
	margin:auto;
	border:6px #5B7F34 double;
	padding:10px;
	background-color: #DFD1B7;
	font-family: "Comic Sans MS", cursive, sans-serif;
	font-size:18px;
	text-align:center;
}

.contact p {
	margin:7px;
}

.contact input, .contact textarea { 
	padding:5px;
	margin:5px;
	background-color: #DFD1B7;
	border:none;
	border-bottom:2px #5B7F34 dotted;
	text-align:center;
}

.contact textarea { 
	width: 90%;
	text-align:center
}

.contact input[type="submit"] {
  background-color : #5B7F34;
  color : #fff;
  border : 2px solid #76A544;
  float:right;
}
Previous page: CSS Contact form Postcard
Next page: CSS Contact form Dotted