Approach 1: Tables

Some would argue that form fields and their labels can be described as tabular data, and so can be slotted into a table that conveniently goes hand in hand with a grid-like presentational layout:

<table>
	<tr>
		<td><label></label></td>
		<td><input /></td>
	</tr>
	<tr>
		<td><label></label></td>
		<td><input /></td>
	</tr>
	<tr>
		<td><label></label></td>
		<td><textarea></textarea></td>
	</tr>
</table>

Some might say forms can be tabular data, some might say that this is a small pile of dingoes droppings - a cop out - hammering a cylindrical peg through a square hole. Not that I’m saying that, you understand… Read more…

• 100 CSS Based Forms Designs

Web form is often the main communication channel between visitors and site owners. Feedback is always important which is why it’s necessary to make sure that web forms are easy to understand and intuitive to use. Nevertheless, even in form design one can afford some healthy portion of creativity.

1. Clean, Simple and Beautiful Solutions

Since web form is probably one of the most important sections on the web-site, it’s necessary for you as a designer to make sure that visitors can easily understand what information they need to fill into the form fields. Complex and long web forms increase the cognitive load for users — they are just harder to deal with. In this context, preferring simple and clean solutions seems like a sound approach. However, if the form was designed with an attention to details and looks good, it’s also reasonable to use some attractive imagery in the forms.

Softmail’s newsletter-box comes from Brazil and displays an excellent integration of the message-icon into the form design. The submit-button is clear and attractive. This is a creative design.

Swfir also uses an envelope as a metaphor.

Handwriting in use on Katrin Wegmann’s site. Attractive, eye-catching and playful design which perfectly manages to convey its function to the users.

TheWatchMakerProject impresses with a nice and unusual design. The form is placed at the right hand side of the latest comments.

Read more…

• CSS Forms Tips