Category Archives: Forms

Forms in web design: a great showcase of creative web design forms, mail forms, usability tips for websites forms, inspiring form feedbacks examples, contact and HTML based forms and much more at Web & Patterns, collecting inspirational solutions for very inspired web designers.

Authentics Jobs Drop-down Form


Authentic Jobs is a job board website designed by Cameron Moll which specializes in connecting companies with creative professionals.
Candidates are easily able to filter the job listing using different kind of filters: among them, a nice drop-down form make the offers sortable by geographical proximity.

Fake letter contact form


Contact forms set on a paper, usually a grungy or stained one, are not so unusual on the web: but while text inputs are commonly aligned vertically inside the form area, in this case they’re scattered among paragraphs in a way that makes you think you’re writing a real letter. Text alignment, slightly tilted, enhances this sensation.

Menu Pages expanding search form

MenuPages.com is simple: Before you go there, you come here. We’ll help you find the restaurant that’s got the food you’re craving in the neighborhood (and price range) you want. Not up for going out? Download a delivery menu from your favorite takeout place.

Being here in Milan, we cannot benefit from all this,but we still enjoy this clever search form that smoothly and instantaneously expands when you click on the advanced option (Ajax may always be blessed).

Funny search form for a kid search engine

inspiring-kid-search-form

A funny, nice search form for Kidsearch, a search engine that let children search and navigate safely through a directory of over 2000 sites in 3 languages (Italian, English and French) that have been visited and approved by the editorial staff . We love the “I’m feeling a lucky kid” button even though we think that a little bigger typography and maybe a pillowy treatment would have make the layout more kid friendly.

Inspirational badge and search form from Dubai Mall

dubai-mall-search-inspirational-badge

This inspirational badge hanging from above, enhances the visibility of Dubai’s Mall form search.

If you’ve ever wondered about this shop here you are some further informations:

The Dubai Mall is the region’s premier shopping, lifestyle and entertainment destination. With more than 1,200 stores and a host of world-class attractions, The Dubai Mall is revolutionizing the modern shopping experience.

Thumbtack’s search form

Thumbtack search form

Thumbtack is an online marketplace for local services,

a free way to find new clients and manage the ones you already have. Just post your service once, and we’ll take care of the rest. Your service page will go live on Thumbtack instantly.

I love the double-decker search form that allows one to switch from the services offering to the wanted ads view in a simply, intuitive way. Fields and labels are cut to the minimum so that the result is at most readable, while a vast range of choiches are given to those who want to refine their search results.

Round-edged textfields and pleasantly colourful tabs convey a soft, good, warm feel.

Expopedia’s form

expopedia a search engine for tradefairs

Expopedia is basically a search engine for tradefairs that:

facilitates and enhances international cooperation between buyers and service suppliers on different levels and lets all of them save money, time and energy

When it comes to build such a website, which essentially is a search related service, being able to design a good form is vital not only for the user experience but, most of all, for the business itself.

Expopedia’s form is divided into 3 chunks so the task of filling the fields in is made easier and faster. Although the form is unremarkably complex, website’s designer took care to provide extra information creating a graphic wizard that illustrates each step.

Name Our Baby rating

Il sistema di rating in nameourbaby

Nameourababy è un servizio che permette di proporre e votare i nomi per bambini: il sistema di rating (in questo caso delle bambine) è ben fatto e anche il form per aggiungere nomi (in questo caso dei bambini) è pulito e chiaro.

Una referenza indispensabile per tutte le mumbloggers.

Identity Works search form

il form di ricerca nel sito di Identity Work

Swedish studio Identity Works has several things of interest: one of them is the search form that, instead of appering in its usual place (usually upper left or center) is at the bottom page, just above browser status bar. A few years ago, this area of the screen would  generally been regarded as a point where the user’s attention won’t never focus and no one would ever have designed a functional component so secluded: what has changed in our cognitive habits?

Maybe the massive success of Facebook and its toolbar has changed our habits and thereby freed designers from composition patterns too restrictive?

Snav booking form

Il form di prenotazione del sito Snav

It’s nice (and sadly quite rare) featuring in Web & Patterns an Italian web sites: in this case we want to introduce you SNAV, a shipping company.
The entire site is set in a clear and generally well done visual treatment and I especially like the booking form that allows you to select your route by either input texts or a flash interactive map.

Geopage search

Il form di Geopage, una guida online alle più famose città americane

Search forms are an essential component in web services dedicated to the discovery of resources in a given locality (they mostly rely on Google Maps,)

In the case of Geopage, apart from the general aesthetic context, I liked the default value of the input text, which immediately explains what can and should be sought in the product. 
Products similar to Geopage are  PatchRatemyarea e Uncover.

Digg submit

Il form di segnalazione di Digg, il servizio per condividere e votare i contenuti web più interessanti

The form to submit content on Digg is really clear:

  1. it shows  the number of necessary steps (even if they are only two);
  2. labels are clear and they also function as a separator;
  3. the input text is really long so you can check if the url is correct;
  4. the combination of radio buttons and icon is visually pleasing.