Een contact formulier is tegenwoordig zeer belangrijk in elke website, ze maken is normaal gezien geen probleem. Maar het formulier goed doen uitzien verlangt enig talent.
Door enkele eenvoudige CSS regels toe te passen kan je jouw formulier er “kick-ass” doen uitzien.

HTML

<div id="wrapper">
<form action="index.html" method="post">
<fieldset>
<legend>Contact Form</legend>
<p>Please fill in your details</p>
<ul>
<li><label for="name">Name <span>* Required</span></label></li>
<li><input type="text" id="name" name="name"/></li>
<li><label for="email">Email <span>* Required</span></label></li>
<li><input type="text" id="email" name="email"/></li>
<li><label for="url">Url</label></li>
<li><input type="text" id="url" name="url"/></li>
</ul>
<ul>
<li><label for="message">Message <span>* Required</span></label></li>
<li><textarea name="message" id="message" cols="20" rows="5"></textarea></li>
</ul>
<input type="submit" class="button" name="submit" value="Send"/>
<input type="reset" class="reset" value="Clear"/>
</fieldset>
</form>
</div>

CSS

body {
	font-family: Georgia, serif;
}
#wrapper {
	width:400px;
	margin: 0 auto;
	position: relative;
}
fieldset {
	border:1px solid #E8E8E8;
	padding: 10px;
	margin: 10px;
	width:300px;
}
legend {
  border: 1px solid #E8E8E8;
  padding:5px 15px;
}
p {
  font-size: 1.2em;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
	margin:10px 0;
	display:block;
}
li input, textarea {
	height:15px;
	padding:5px;
	border:1px solid #E8E8E8;
	width:288px;
}
textarea {
	font-family: Arial, sans-serif;
	font-size: 12px;
	height:150px;
}
span {
	color: #AC0000;
	font-size: 10px;
}
.button {
	border:1px solid #E8E8E8;
	padding:5px 10px;
	margin:0 5px 0 0;
	cursor: pointer;
	background: #AC0000;
	color: #FFF;
}
.reset {
	border:none;
	padding:5px 10px;
	margin:0 5px 0 0;
	cursor: pointer;
	background: #FFF;
	color: #AC0000;
}