Here is a pretty complete registration form, nicely juiced up with some neat CSS.

Here you can see a DEMO

Download the ZIP file from here: CSS Registration ZIP

Enjoy it!

For your design, what would you do better? Do you think being a top site gives you trend setter status? Or should some sites rather be ashamed of their poor design skills?

Share your opinion and maybe you have some interesting showcases to add?

I hope you enjoy it!

1. Google

http://www.google.com

Well, Google is Google, so fancy design is never a really big topic. It definitely follows major usability guidelines which is also shown here: http://www.boxesandarrows.com/view/getting-a-forms98

2. Facebook

http://www.facebook.com

Flawless in functionality, I would say. I don’t know about the positioning of some elements, like the “Remember me” checkbox…

3. Youtube

http://www.youtube.com

Now, what I don’t really get, are these changes of style within Google. YouTube belongs to Google and the design of this registration form clearly shows this. But why not use the same style through all the pages?

4. Twitter

http://www.twitter.com

Although Twitter is one of my personal favorites, it could still need some more consistency. Using rounded input boxes in one place, and then plain old inputs in another place, makes it look a little bit inconsitent.

5. Wikipedia

http://www.wikipedia.org

The strong focus on content is also reflected in the design of Wikipedia’s login and registration form: it is plain and simple.

6. Windows Live

http://www.live.com

Again, an example of inconsistent design. Why not use the same kind of buttons and the same sizes for inputs?

7. MySpace

http://www.myspace.com

A clean design, that I would tweak only in the alignment of the labels in the registration…

8. WordPress

http://www.wordpress.com

It might seem, that there is a lot of different styling happening here, but actually it all somehow fits together: the color choices, the sizes and the “special effects”.

9. Ebay

http://www.ebay.com

Ebay’s form design is a nice example of optimizing design for usability. Elements are used consistently throughout the site. Here is a really great article on the main changes that happened and why: http://www.digital-web.com/articles/redesigning_ebay_registration/

10. Amazon

http://www.amazon.com

A very clean design. What I never liked though, was this “let’s spare” login form that also serves as an entry for a new user to register. I mean, if I want to login, I am a registered user and have a password, right?

11. AOL

http://www.aol.com

Sometimes, I feel like, I am back in 1999… That “Forgot Password” seems like the designer went “oh, damn, I forgot to add Forgot Password to the login” …

12. LinkedIn

http://www.linkedin.com

Functional, clean but definitely not an award winning design.

13. Yahoo

http://www.yahoo.com

Old school form but functional and clean.

14. HI5

http://hi5.com

Another example of completely inconsistent design: the colors, the buttons, the framing…

15. Craigslist

http://www.craigslist.com

Very strange (almost styleless) form design, but it somehow fits to Craigslist.

16. International Movie Database

http://www.imdb.com

Besides fitting to the 1994 style of the whole page, it really is a disaster! For God’s sake, get a web designer…

17. Photobucket

http://www.photobucket.com

Not the creme de la creme: colors, sizes, hello?

18. CNET

http://www.cnet.com

This is what I call consistency! A pair that goes along and reflects the overall design of the page.

19. Adobe

http://www.adobe.com

Good that most members are indeed returning.  It’s clean and the user has a good overview…it’s Adobe that did Photoshop right? :-O

20. ESPN

http://www.espn.com

Ok, I know the error messages have to appear somewhere, but is it necessary to have such huge spaces between the inputs? I mean, the spaces are bigger than the inputs! And I really think this combination of “select with one style” and “normal input with another” doesn’t go together… Why not having the same border for all of them?

21. Skyrock

http://www.skyrock.com

Nice registration form. Just the login looks like from another site (planet)…

22. Tumblr

http://www.tumblr.com

Now, this is fun: big form, simple input and beautiful design. I just wanna sign up!

23. LiveJournal

http://www.livejournal.com

Clean, yes. Functional, yes. Ehm, what happened to the password field? Is it always “shorter” than the username or is it just another case of “damn, I knew I forgot something in this from”…the LOGIN BUTTON!

24. deviantART

http://www.deviantart.com

It’s a nice set of colors although it could use a little bit more contrast. And if it’s just allowed to put 20 characters in the input, e.g. for the name, why giving it double the size then? Oh, and by the way, the email can be 255 characters long!

25. Tagged

http://www.tagged.com

Pure CSS! But there is a lot more you can do with CSS, you know…like creating nice shadows on the buttons with borders…

26. NETLOG

http://www.netlog.com

Nice one, but the position of the register buttons seems weird…

27. Digg

http://www.digg.com

I like Digg’s forms, I really do. But you know guys, at least for Firefox you could give the select the same style like to the input: “border: 1px solid #ccc”… looks sooo much better!

28. The New York Times

http://www.nytimes.com

Old fashioned but fitting. But why not adapting the other inputs to the select?

29. Ning

http://www.ning.com

Now, I must admit: this is definitely my personal favorite – almost impecable. Just, you know, Firefox, select, borders…

30. Answers

http://www.answers.com/

Compact and consistent. Really nice job.

31. Maktoob

http://www.maktoob.com

Nice one.

32. Metacafe

http://www.metacafe.com

A lot of blue going on here, but it still fits.

33. Sourceforge

http://sourceforge.net/

Not really consistent and I would suggest using “display: block” in the registration, gives a less “stairs” like effect…

34. eHow

http://www.ehow.com

I love this registration form, it’s beautiful, but the login doesn’t really look finished. What’s with that “SIGN IN” position?

35. StumbleUpon

http://www.stumbleupon.com

I think, it needs some more development.

36. Reddit

http://www.reddit.com

Simple and really neat… fit’s perfectly.

37. delicious

http://www.delicious.com

Very nice one, too.

38. Technorati

http://technorati.com

Very elaborated and stylish… but still functional and user friendly.

39. Habbo

http://www.habbo.com

Habbo-like!

40. Friendster

http://www.friendster.com

So, “Keep me logged in” is like what? Compulsory? Ah no, after all it’s not recommended for shared computers… But a nice registration form.

41. Flixter

http://www.flixter.com

Clean and consistent. But 8 captcha letters? Come on!

42. Paypal

http://www.paypal.com

Not really a nice login. What’s with that “I am a tube” background anyway?

Enjoy!

Click to see a demo

Here you can download the source as a ZIP file:  Captcha ZIP

DEMO

The result looks like this:

Let’s start with the css. Add it to your header or to your existing style:

<style>

.registration form{
 width:220px;
 height:330px;
 background-color: black;
 padding: 10px 0px 0px 4px;
 -moz-border-radius: 15px;
 -webkit-border-radius: 15px;
 color: white;
 text-transform: uppercase;
 font-size: 11px;
 font-weight: bold;
 font-family: "Century Gothic";
}

.registration input, .registration select{
 width: 195px;
 height: 20px;
 margin: 3px 0px 0px 10px;
 border: 0px;
 font-weight: bold;
}

.registration input:focus{
 background-color: orange;
}

.registration form label{
 margin: 5px 0px 0px 15px;
}

a{
 outline:none;
}

.register_button{
 width: 149px;
 height: 42px;
 background-color: orange;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 margin: 15px auto 0px auto;
 text-align: center;
 cursor: pointer;
 clear: both;
}

.register_button span{
 font-weight: normal;
 font-size: 28px;
 font-family: "Impact";
 line-height: 40px;
}
.register_button span a{
 text-decoration: none;
 color: white;
}
.register_button span a:hover{
 color: black;
}

span.error{
 margin-right: 20px;
 font-size: 9px;
 color: orange;
 height: 10px;
}

p.error{
 margin:0px 14px 0px 10px;
 font-size:9px;
 color:orange;
 height:6px;
 padding: 0px 0px 8px 0px;
 text-align:right;
 text-transform:none;
}

</style>

The html will be a form inside of a div with the class “registration”:

<div class="registration">
 <form>
 <label>Your email</label>
 <input type="text" />
 <p class="error"><span>This email exists already in the database</span></p>

 <label>Password</label>
 <input type="text" />
 <p class="error"><span>At least 8 characters</span></p>

 <label>Password [repeat]</label>
 <input type="text" />
 <p class="error"><span>Some text here</span></p>

 <label>Year of Birth</label>
 <input type="text" />
 <p class="error"><span>Some text here</span></p>

 <label>Country</label>
 <select name="country">
 <option>Country 1</option>
 <option>Country 2</option>
 </select>  

 <div class="register_button"><span><a href="#">REGISTER</a></span></div>

 </form>
</div>

You can adapt the color as you like, since everything looks fine with the black. Just change the three “oranges” in the class p.error, register_button and .registration input:focus.

Here are some examples:

Enjoy!