CSS Forms

CSS Forms

A big part of our work as website designers is the ability to make things look good and function well. We spend hours taking the time to make every aspect of our site visually compelling, intuitive, user friendly, accessible and overall beautiful. Our forms are no exception! Our forms should be beautiful, easy to use, and should look consistent with the rest of our website. We can do this easily with CSS.

1. Sample Form

    <!DOCTYPE html>
<html>
<form>
 <div>
 <h1>Contact Form :</h1>
 
 <label>
 <span>Your name</span><input id="name" type="text" name="name" />
 </label>
 
 <label>
 <span>Email Address</span><input id="email" type="text" name="email" />
 </label>
 
 <label>
 <span>Subject</span><input id="subject" type="text" name="subject" />
 </label>
 
 <label>
 <span>Message</span><textarea id="feedback" name="feedback"></textarea>
 <input type="button" value="Submit Form" />
 </label>
 
 </div>
</form>
</html>
Try it with the Editor

Our form looks pretty plain without any styling, as you can see from the sample below:

Our form has no structure, no color, and no personality. We can change that with a little bit of code. First, we are going to style the form tag itself.

2. Style The Form Tag

form {
  background: -webkit-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  background: linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
  margin: auto;
  position: relative;
  width: 550px;
  height: 450px;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
  font-style: italic;
  line-height: 24px;
  font-weight: bold;
  color: #09C;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px;
  border: 1px solid #999;
  border: inset 1px solid #333;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
Try it with the Editor

You form should look something like this:

Next, we should style the input area. That is where the text is actually entered into each field.

3. Style The Input Area

input {
  width: 375px;
  display: block;
  border: 1px solid #999;
  height: 25px;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
Try it with the Editor

your form should begin to take shape, and look like the image below:

I changed the background to white and the text to blue, giving the user a highly contrasting effect when they mouse over the button.

4. Mouse Over The Button

button {
  width: 100px;
  position: absolute;
  right: 20px;
  bottom: 20px;
  background: #09C;
  color: #fff;
  font-family: Tahoma, Geneva, sans-serif;
  height: 30px;
  border-radius: 15px;
  border: 1p solid #999;
}
input.button:hover {
  background: #fff;
  color: #09C;
}
Try it with the Editor

Here is the normal state:

Here is the hover state:

Our form’s structure is done. You could stop here and you would have a great form, all styled with CSS. However, you could take it one step further, by adding a little user friendly styling to the text input areas, so that the user can tell where they are typing. You can do this with a small amount of CSS:

textarea:focus, input:focus {
  border: 1px solid #09C;
}

What this does is it tells the browser that if a person has a text input or text area selected, that it needs to add a 1px blue border around the active input area, so the user knows where they are visually in the form. This is just a little extra something that is much appreciated by many users.

5. Form Focus