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.

Screenshot

Swfir also uses an envelope as a metaphor.

Screenshot

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

Screenshot

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

Screenshot

Frexy.com with a nice and clean solution.

Screenshot

Flingmedia uses a sliding contact form. Depending on the visitor’s intention (general comment, new project request etc.), user can slide to a web form which addresses his/her interests.

Screenshot

Envero.org — the web form is huge and fills the whole layout width. The font-size and the size of input fields are chosen accordingly.

Screenshot

2. Creative solutions

Although web-forms are supposed to enable users to get in touch with site owners, quite often designers risk creative solutions and offer layouts visitors wouldn’t actually expect from a boring, standard web form they’ve used to over years. Many different metaphors are used. Here is an overview of some interesting ones.

Created201.com takes a look at the contact form from a quite different perspective. The effect is created using Flash.

Screenshot

Ok, this is really different. If you’d like to get in touch with Edward Pistachio, you’ll need to solve a puzzle first. This approach isn’t applicable for blogs or business web-sites. However, it perfectly fits to the concept of the site. The visitors are amazed.

Screenshot

Chemistry Recruitments uses a folder, stick-it-notes and few sheet of paper.

Screenshot

Alexandru Cohaniuc presents a huge web form with a sketch and a stamp.

Screenshot

Tony Yoo’s contact form shows the contact details on the left hand side. No happy talk, just getting to the point. And some designers need an extra-page for contact details!

Screenshot

Qwert City enables users to send the designer a “postcard”…

… so did Wildvuur.com (currently offline) — the web form was perfectly integrated into the site layout.

Screenshot

BubblesSOC has a ribbon on the top of a large, laaarge, really laaaaarge web form.

Screenshot

3. Use illustrations to brighten up the form

When a user clicked on the link which leads to a web form, he or she is one step away of getting in touch with site owners. Some designers try to make sure visitors actually fill in the form by using attractive characters and illustrations which serve the purpose of making users feel more comfortable with the form.

Intuitive Designs tries to impress visitors with a busy mailman. Doesn’t he actually have enough to do?

Screenshot

X-Grafik.sk with a mail stamp from Slovakia.

Screenshot

Kgoule.com has a friendly buddy who invites visitors to post a comment.

Screenshot

Dressfordialogue.com (the design is different now) uses a tiny illustration at the top right of the form. Nevertheless, it works. Sometimes a tiny detail is enough.

Screenshot

4. Integrate more functions

Searching for creative web forms, we’ve observed some new functionalities which haven’t been that popular last year. Among them are WYSIWIG-editors and sliders. Editors are used to provide users with rich text-editing for text formatting, different header levels and images. A slider can be used to define the budget limits for a given project.

InfectedFX has a rather complex web form with hints, options and buttons. The form integrates a WYSIWIG-editor into the textarea.

Screenshot

Sidebarcreative.com offers a a slider potential clients can use to limit the project budget.

Screenshot

5. Use icons to communicate required information

From the usability point of view, there is nothing more painful than a long web form with plain-text labels and without any visual indicators. Such forms are boring, unattractive and uncomfortable to use. You can design web forms better. In fact, not much is required. Often icons are used to visually indicate the information required from the user to fill the form.

DesignDisease WordPress Theme uses simply symbols to indicate the required information.

Screenshot

Bouctoubou.com has very basic and simple symbols. However, they manage to make the form more interesting.

Screenshot

6. Hand-writing and grunge in use

We’ve already written about the popularity of hand-drawing and grunge in modern web design. Such design elements are also being used in web forms as they are always unique and convey the personality of the designer. Particularly Flash-based solutions prefer this approach.

Redblu is presented as a sheet of newspaper. To get to the contact form you need to drag the newspaper accordingly.

Screenshot

Fivecentstand offers a Flash-based solution which is seamlessly integrated in the overall site design. It might be difficult for new users to find the form, though.

Screenshot

Pointofe.com with a web form presented as a stick-it-note. The font-size should probably be increased.

Screenshot

Swiths.com with a vintage design. The hover-effect is provided as well.

Screenshot

7. Experimental solutions

Below you’ll find an overview of some unusual solutions which can serve as a starting point for your further design. Not all of them might look good, but they have something and you may want to improve the ideas further.

Adorama.com offers a nice-looking and compact solution: a newsletter-box in the sidebar.

Screenshot

Different language — different style. On Booloob.com the submit-button is placed on the left hand side of the form.

Screenshot

Paregonta.com: cubism meets minimalism. Colorful yet extremely compact form which uses little space. This is a contact form.

Screenshot

Sunmatecushions.com with a really different style which somehow fits in the design.

Screenshot

Well, why not? Wallpaper for the textarea on GeekAndHype.com.

Screenshot

Revota.com is dark and shady, but uses a light hover-effect to display the current field.

Screenshot

Catydesign is also dark. The form impresses with a clever placement of the hints.

Screenshot

Designorati.com: this comment form is hard to overlook.

Screenshot

MyMileMarker: the web form gone in width. Sometimes horizontal approach is more useful than the standard vertical approach.

Screenshot

Jaroslav Cerný shows how to combine an e-mail with a web form. The form isn’t online any longer, but it’s definitely worth mentioning.

Screenshot

Xyarea.be: unusual and original. This is probably the thinnest newsletter box in the world.

Screenshot

 

Developing Forms

Prettier Accessible Forms
Screenshot

The Form Assembly – Form Layouts
Screenshot

CSS Styling of forms, Stu Nicholls
Screenshot

Semantic Horizontal Forms
Screenshot

Trimming form fields
Screenshot

Badboy Niceforms
Screenshot

Functional Pretty Forms
Screenshot

CSS-Only, Table-less Forms
Screenshot
Accessible Forms

Subtraction: Free Form for All – Standardkonforme Online-Formulare
Screenshot

Accessible CSS Forms
Screenshot

Form Layout Templates
Screenshot

Style Web Forms Using CSS
Screenshot

Form Help without Popups
Screenshot

Fun with forms – customized input elements
Screenshot

Styling Form Fields
Screenshot

AutoSuggest – An autocomplete text field with Ajax
Screenshot

Really easy field validation with Prototype
Screenshot

Scrollable Checklists
Screenshot

Create Web-Forms online

Icebrrg – HTML Web forms, surveys, and invitations made chillingly simple
Screenshot
Screenshot
Wufoo – Build HTML Forms, Online Surveys and Invitations
Screenshot

Screenshot
JotForm – a web based WYSIWYG form builder
Screenshot

Accessify Form Builder
Accessify

FormLogix – Create web forms for free
Formlogix

How I said some time ago…tables are not evil. Sincerly, in some case I used pure CSS code to design forms but, in general, I prefer to use tables. It’s simpler and faster than use only CSS property “to simulate” a table structure. In any case, for CSS lovers, this tutorial illustrates a proposal about how to design a pure CSS form without using html tables.

You can download the source code and use it in your web projects.

 Download source code

Step 1: HTML Code
Create a new page index.html and copy and past this code into the tag <body>:

<div id=“stylized” class=“myform”>
<form id=“form” name=“form” method=“post” action=“index.html”>
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>

<label>Name
<span class=“small”>Add your name</span>
</label>
<input type=“text” name=“name” id=“name” />

<label>Email
<span class=“small”>Add a valid address</span>
</label>
<input type=“text” name=“email” id=“email” />

<label>Password
<span class=“small”>Min. size 6 chars</span>
</label>
<input type=“text” name=“password” id=“password” />

<button type=“submit”>Sign-up</button>
<div class=“spacer”></div>

</form>
</div>

How you can see from the code above, the structure of our CSS form is the following:

I used <label> for the name of each input element and <span> tag for the short description. All labels and input elements have float CSS property set to left;

Step 2: CSS Code
Copy and paste the following CSS code in the <head> tag of your page:

body{
font-family:“Lucida Grande”“Lucida Sans Unicode”, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ———– My Form ———– */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ———– stylized ———– */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}

 

This is only a proposal for the form layout. You can reuse this code changing all properties how you prefer.

 Download source code

 

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

 

Source Articles from:

1. Smashingmagazine.com

2. woork.blogspot.com

3. Design Shack

You may also like...