WebDesign&Such

I create a couple of forms a week for client’s websites. Usually they’re very similar in content. First Name, Last Name, Address, Phone Number, Email, Comments, etc. Of course I like to use a little CSS to style these forms up to match the rest of the site. I find myself copying the same basic styles over from the last form I created, and then editing the background colors and borders of the inputs, buttons, etc. I decided it was time to put these base styles online so they would be easy to grab on any project. And of course hopefully this will help other designers realize how simple the process is, and why there should never be an un-styled form on a website.

Check out the demos to see how by changing a couple of CSS rules you can create a completely different looking form to match your website. Then continue reading to see how the CSS code works for this. When viewing the demo forms, try typing in the fields to see how the background color of the fields can be changed, as can the color of the text in the field. Also, try to roll your mouse over the buttons to see how they can have rollover effects put on them.

View Demo 1

View Demo 2

View Demo 3

Form 1

input, textarea {
background-color:#eee;
border:1px solid #d8f000;
padding:3px;
width:195px;
color:#036;
font-weight:bold}

input {
-webkit-border-radius:10px;
-moz-border-radius:10px;
}

.submit {
width:100px;
background-color:#d8f000;
border:1px solid #fff;
cursor:pointer;
*border:1px;
font-weight:bold;
-webkit-border-radius:10px;
-moz-border-radius:10px;
color:#036;
font-weight:bold
}

.submit:hover {background-color:#ffc;}

You’ll see in the above form how I used Border-Radius on the buttons and the inputs. This gives a nice effect, but doesn’t break the design if the user of the website is on a non-compliant browser. You’ll see when I styled the buttons I made a class called “submit“. So in the XHTML code, both the Submit button and the Reset button have the class “submit”. You can see how rollovers can be made for the buttons. I also set the cursor type to “Pointer” for the buttons, since for some reason it’s the arrow cursor by default.

Form 2

input, textarea {
background-color:#fff;
border:1px dotted #999;
width:200px;
padding:2px;
font-weight:bold
}

input:focus, textarea:focus {background:#eee}

.submit {
width:100px;
background-color:#263895;
color:#fff;
border:1px solid #999;
cursor:pointer;
*border:1px;
font-weight:bold;
padding:2px
}

.submit:hover {background-color:#4054bd;}

With this form I wanted to show how you don’t need to use crazy loud colors to style a form to look better. The style is pretty plain on this form, but the dotted borders give the inputs a touch of character. You can also see the use of “:focus” on the inputs and textarea. What this does is change the background color of the input when your cursor is inside of it. This helps your users keep track of where they are on the form.

Form 3

input, textarea {
background:url(back.jpg) repeat-x #93e1ff;
border:1px solid #848383;
width:191px; padding:5px;
color:#006;
font-weight:bold;
-webkit-border-radius:5px;
-moz-border-radius:5px
}

input:focus, textarea:focus {background:url(backRoll.jpg) repeat-x #86cee9;}

.submit {
width:100px;
background-color:#93e1ff;
border:1px solid #848383;
cursor:pointer;
*border:1px;
color:#006;
font-weight:bold;
-webkit-border-radius:5px;
-moz-border-radius:5px
}

.submit:hover {background:url(backRoll.jpg) repeat-x #86cee9;
color:#006; font-weight:bold}

With this final form you can see how background images can be used inside the inputs and buttons. I made a slightly darker version of the background image for the “:focus” state.

With these basic CSS techniques, you can see how simple it is to make a contact form much more visually appealing and match the rest of your website.