stylish reusable web forms

Question

Hi,

I'm looking for some examples of stylish web forms that can be used on any site. I've googled for "stylish web forms", but most of the examples I find are of very ornate forms that use a lots of images, which are unlikely to look good on other sites that use different color schemes. I've also found lots of examples of using CSS to layout forms, but they usually don't apply any styling to the forms to make them look good.

What I'm looking for is something in between:

• Properly laid out, e.g. labels and inputs aligned (I have no opinion on the whole "label on top or alongside" debate)
• Nicely styled, but without using images so colors can be easily changed
• Semantically valid markup, e.g. no tables or JavaScript, though I'm not fundamentalist about this (a few extra divs is OK)

I'd prefer if the relevant CSS is shown on the page (or can be downloaded), so I don't have to "reverse engineer" the styles with Firebug. Also, a response that points to a single example is a lot more useful than "here's a page with a million example forms, most of which don't meet your requirements".

I realize I'm being very demanding here, so apologies and thanks!

Answer 1

See Prettier Accessible Forms.

However, as noted in Styling form controls with CSS, revisited, you are going to have a lot of variation in appearance across browsers and operating systems.

These articles will show you how to build visually pleasing forms, instead of giving you a catalog of a bunch of ready made templates.

Answer 2

http://www.rockettheme.com/ has some pretty good templates and themes. They are generally for existing CMS systems but you could adapt them or parts of them for your own sites.

Answer 3

Here are a few good sites, with self explanatory examples and usage.

1. http://designshack.co.uk/articles/10-css-form-examples
2. http://www.smashingmagazine.com/.../
3. http://jeffhowden.com/code/css/forms/
4. http://24ways.org/2006/showing-good-form

There are billions more online, tutorials, downloadable examples, stylesheets. To get your ideal solution you might have to mash them together.

Answer 4

I'm not sure if this is as comprehensive as what you're asking for, but I like going with something simple like this:

<fieldset>
  <legend>New customer?  Provide the following</legend>

  <label for="FirstName">First Name:</label>
  <input type="text" ID="FirstName" name="FirstName" />

  <label for="LastName">Last Name:</label>
  <input type="text" ID="LastName" name="LastName" />

  <label for="Address">Address:</label>
  <input type="text" ID="Address" name="Address" />

  <label for="City">City:</label>
  <input type="text" ID="City" name="City" />

  <label for="State">State:</label>
  <input type="text" ID="State" name="State" />

  <label for="Zip">Zip:</label>
  <input type="text" ID="Zip" name="Zip" />

  <input type="submit" Text="Submit Order" />
</fieldset>

Using CSS like this:

fieldset {
  overflow: hidden;
}

label {
  clear: both;
  float: left;
  margin-top: 10px;
  width: 125px;
  /* If you want the labels flush along the right edge */
  padding-right: 5px;
  text-align: right;
}

input {
  float: left;
  margin-top: 10px;
}

/* Align the submit button under the fields */
input[type=submit] {
  clear: both;
  float: left;
  margin-left: 135px;
  margin-top: 10px;
}

That produces the layout shown in the image early in this (completely unrelated) post. There's a source download with the markup and CSS there too, if you don't mind ASP.NET.

Speaking to reuse, I've found that basic structure to be flexible enough to use anywhere. For example, we used basically the same markup and CSS for this more customized contact form: http://www.thirtyfiveatlanta.com/meet/

Answer 5

I really like Wufoo's forms : http://wufoo.com/examples/ I've copied and used their HTML and CSS for my own projects with good results.

Answer 6

Uni-Form

This response was posted as a comment by Darmen, but I feel it's sufficiently useful that it deserves to be promoted to a reply