article

Monday, November 21, 2011

Create Contact Form Design

Create Contact Form Design





<style>
#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#222222;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { margin:0; width:110px; display:block; padding:5px 0; font:normal 12px Arial, Helvetica, sans-serif; color:#2c2c2c; text-transform:capitalize;}
#contactform label span { display:block; font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { width:440px; border:1px solid #dcdcdc; margin:5px 0; padding:5px 2px; height:25px; background:#f5f5f5;}
#contactform textarea { width:440px; border:1px solid #dcdcdc; margin:10px 0; padding:2px; background:#f5f5f5;}
#contactform li.buttons input { padding:3px 0; margin:0; border:0; color:#FFF;}
</style>
<h2>Contact form</h2>
<form action="contact.php" method="post" id="contactform">
<ol>
<li>
<label for="name">First Name<a href="#">*</a><br />
</label>
<input name="name" class="text" id="name" />
</li>
<li>
<label for="label2">Your e-mail<a href="#">*</a><br />
</label>
<input id="label2" name="name2" class="text" />
</li>
<li>
<label for="email">Company Name<br />
</label>
<input id="email" name="email" class="text" />
</li>
<li>
<label for="label">Subject<br />
</label>
<input id="label" name="email2" class="text" />
</li>
<li>
<label for="message">Message<a href="#">*</a><br />
</label>
<textarea id="message" name="message" rows="6" cols="50"></textarea>
</li>
<li class="buttons">
<input type="image" name="imageField2" id="imageField2" src="images/send.gif" />
</li>
</ol>
</form>

Related Post