Blogging and All that Malarkey Stuff & Nonsense

Malarkey is Andy Clarke, a creative designer with a passion for accessibility and web standards. This is his personal website.

On top form

Form styling is often difficult to get excited about. So I'm collecting what you think are great examples of <form> design.

It's now only two weeks until @media2005 in London, and the (now sold out) event looks set to be one of the biggest web occassions the UK has seen so far. It will be interesting to see how @media's style differs in comparison to SXSW.

My presentation, Anatomy of a Mouse is almost complete (Ed says: Can you say almost complete? It's either complete or it isn't.). In the context of Disney Store UK I'm looking at the creative styling of common elements with CSS, and one of those elements is the <form>. So in the run up to the conference, I have a favour to ask of you.

I'm looking for examples of what you consider to be great looking <form> styling. Some examples which spring to my mind are Shaun Inman's comment form and Devil's Details' Submit form.

Over to you

Which site's <form> styling has made you gone WOW! and why? Either add a URL in the replies (<a href=""></a>) or (even better),

I know that some people (including myself) sometimes need a spoonful of inspiration when it comes to <form> design and styling. It will be interesting to see what you come up with.

Replies

  1. #1 On May 24, 2005 09:13 AM Andreas said:

    I like Badboy's styling of forms. Hope, i could help!

  2. #2 On May 24, 2005 10:13 AM Joe Webber said:

    I'm quite keen on the form at leftjustified.net

    https://leftjustified.net/contact.php

  3. #3 On May 24, 2005 10:31 AM John said:

    I remember being impressed by the email form at Tierra Hermosa for it's subtle on hover effects and clean lined design.
    All the good work of Kevin Davis - Alazanto
    Have a good @media

  4. #4 On May 24, 2005 10:49 AM Gerald Fischer said:

    I guess Snaptax has a real impressive one.

  5. #5 On May 24, 2005 11:55 AM Richard Rutter said:

    Well nothing came immediately to mind, but I do remember being quite pleased with the advanced music search on Clagnut. Something about the fieldsets...

  6. #6 On May 24, 2005 01:15 PM Marko Dugonjić said:

    I like Didier Hilhorst's forms:


    ... but it's due to my personal taste :)

  7. #7 On May 24, 2005 01:17 PM Marko Dugonjić said:

    Ouch! So I guess no more unordered list in you posts :p

  8. #8 On May 24, 2005 01:34 PM Shaun Inman said:

    Thanks for the nod Malarkey. We also have that one in green.

    As far as form layout is concerned I've always been enamored with Greg's comment form (I even took a page from that book for my most recent redesign).

  9. #9 On May 24, 2005 01:47 PM Malarkey said:

    @ Shaun Inman: Wooohoa, I hadn't realised that site belonged to the lovely (future spouse) Ms. Jensen

  10. #10 On May 24, 2005 07:06 PM Matt said:

    https://web.burza.hr/en/contact/#content

    The contact form on this site is really good....well, the whole site is, but the big red 'send' button on the contact form is very appropriate!

    Oh, and https://www.pixelplain.com/contact/index.html - that one looks very good too.

    I find forms are a bit tricky to create well, and can get a bit frustrating...so when other people do them brilliantly - it gives me a bit of hope!

  11. #11 On May 24, 2005 08:46 PM Marko Dugonjić said:

    @ Matt: The behaviour of the button on web.burza is one of many easter eggs on the site. Glad you discovered it!

  12. #12 On May 24, 2005 09:24 PM Matt said:

    Marko - the button is good....all good....*smiles knowingly*

    Great site by the way. :)

  13. #13 On May 24, 2005 09:58 PM goodwitch said:

    One of my favorite interfaces is Artscape at the Peabody Essex Museum. While it is in Flash, I think it can server as an inspiration for form design. What I love is the ability for me to approach the task from different directions.


    And the form of the day would be Derek's new dockable comments. N'est pas?

    Last but not least, I used to be quite enamored with The Broadmoor Hotel Reservation page. Again, Flash...but still, a delightful concept of "one stop" shopping.

  14. #14 On May 24, 2005 11:44 PM Masklinn said:

    Snook's fixed comments, because although they're simple (as far as style modifications go), their integration at the center of the page (as if the designer was telling me "What you may want to say is important to me") and the fixed positioning made me go "holy freakin' cow"

  15. #15 On May 25, 2005 12:23 AM Trisatn said:

    Definitely SnapTax

  16. #16 On May 25, 2005 01:25 AM Matt said:

    Forgetfoo's post comment form. The styling is definitely cool, but it is probably the implementation of it that gives it that "WOW."

  17. #17 On May 25, 2005 08:52 AM Piero Fissore said:

    This one is good too: phonophunk.

  18. #18 On May 25, 2005 06:38 PM Jordan Moore said:

    One of my basic forms: https://www.devotedfreak.com/contact/

    It's accessible, doesn't require very much markup, and actually makes use of <fieldset>s and <legend>s.

  19. #19 On May 26, 2005 09:13 AM Veerle Pieters said:

    A while ago I experimented with this form. It doesn't work in IE 5 Win as I remember. I found my inspiration/background info from these links :
    Designing a form using CSS layouts
    Adding Style to Forms with CSS
    Fun with forms - customized input elements
    Style Webforms Using CSS
    Looking forward to @media ;-)

  20. #20 On May 27, 2005 02:37 PM Dave said:

    Just simply to continue with a flash theme came accross coldplay's form.

  21. #21 On May 27, 2005 04:17 PM David said:

    Although it's fairly plain looking, I rather like Derek Featherstone's dockable comments form. Thought it was a bit gimmicky at first, but actually it could be very handy when referring back to parts of a long page.

    Slightly off-topic, but the completed example in your Stylish, accessible forms article now links to the wrong URI for the stylesheet - there should be an "examples/" in there.

  22. #22 On May 27, 2005 05:08 PM Peter G. said:

    Yeah, SnapTax has to be the best. Shoot, that form was so good it made me want to file my taxes all over again.

    I’m also fond of any forms that use those cool drop shadows in the input boxes (e.g. Maratz, Devoted Freak). I still haven’t gotten around to figuring out how they do that.

  23. #23 On May 27, 2005 07:11 PM Marko Dugonjić said:

    @ Peter G. I actually wrote a short entry about how to apply drop shadows to input elements.

  24. #24 On May 27, 2005 07:49 PM neal said:

    Great post, forms can be dull so nice to see all these examples of interesting designs.

    Maybe it's me and I can't see the wood for the trees... how are the (pseudo) rounded corners achieved on the this site's reply form and others like Phonophunk? I've looked at the CSS but cannot see anything obvious, I think I need a 3 day weekend!!!