CSS Contact Form

A nice styled contact form is a simple and quick way to make your site look

Example

Your name
Telephone
Email
Query
 
CSS Human Person Language

<style type="text/css">

.formInput1 { border:#003366 1px solid; font-size:12px; height:16px; width:250px; }
.formInput1:focus { border-color:#FF6600; }

 


.formInput2 { border:#003366 1px solid; font-size:12px; height:100px; width:250px; }
.formInput2:focus { border-color:#FF6600; }

.formSubmit { border:#003366 1px solid; background-color:#0099FF; color:#FFFFFF; font-weight:bold; height:18px; }
</style>

start the css definition section

 

create some styles

the ':focus' bits means this style comes into
play when the cursor is in the input box

 

another style - taller, for the big input area

 

 

some styles for the button

Then create a form, add some input boxes, and attach a style 'class' for each form element

HTML Human Person Language

<input name="name" type="text" class="formInput1" id="name" />

a normal input box, but use class="formInput1" to attach the style to this element on the page