Web Designers Journal

Visions Connected To The Web


10 CSS Form Examples

Forms can be greatly enhanced with a touch of CSS, making them more usable and far more visually attractive. Follow some of the examples below and you’ll be creating stunning CSS forms in no time at all.

1. Semantic Horizontal Form

Horizontal CSS Semantic Form

This form is coded in a semantic way and the elements are positioned next to eachother except for the last fieldset which spans the full width of the form below the 3 top fieldsets. It’s been tested in FF1.x, IE6 and Opera8. (looks a little quirky in IE5.x but still usable)

2. Nice Forms

Nice Forms

A great form, with graphical elements and colour to create a different and unique look. All done with CSS and semantic coding.

3. StylePhreak Simple CSS Form

Simple CSS Form

A simple form with regular alignment and unique lines to break up the different sections. This works well as a great base to start your own custom form from.

4. Veerle’s Blue CSS Form

Veerle Blue CSS Form

A simple blue form with rounded background corners, all styled in CSS and XHTML. The layout is pixel perfect, and the images can be customized to match your own requirements.

5. Who says CSS forms can’t be pretty?

Assemble Soft's CSS Form

A unique form with soft background images to complement the fields. It highlights many form possibilities, including a pop-up calendar for choosing a date. A related tutorial also accompanies the example.

5. Man in Blue: Form Examples

6. CSS Play – A form with style

7. The Form Garden

8. Prettier Accessible Forms

9. HTML form effects with CSS

10. A 2 column CSS form layout

One Response to 10 CSS Form Examples

  1. Hey, amazing article! I will keep following your site 😉