In this article I just featured many good looking contact forms, so you should know how the contact form is good looking. Now let’s take a look how to create outstanding and beautifully designed form element from scratch ourselves. Things can get tricky even if you are experienced designer.

Although It Is hard to attract visitors attention, but this article should help to stand out and create semantically correct, good looking and accessible web forms, radio buttons, buttons, checkboxes, field sets and everything that come to your mind when you are creating contact or login page!

1. Simple Form Example


This tutorial will explain you the crucial point you should give attention to.

2. Good Looking Form Without Table


This tutorial will explain how to design good form using clean CSS design with only label and input tags to simulate an HTML table structure. You can use all CSS/HTML elements to design your custom contact form for your web projects.

3. Prettier Accessible Forms


Just visit to get tutorial to make accessible form

4. NiceForms


Niceforms is a script that will replace all the most commonly use form elements with custom designed ones. You may either to use the default theme that is provided or you can even develop your own look with minimal effort.

5. Adding Style with CSS: A Beautiful Form


Forms don not have to be ugly and boring, and certainly don not have to be inside tables to look nice and aligned. This form will make real of it.

6. Turn postcard photo into a stunning comment form using CSS


This tutorial will guide you how to make stunning comment form using old postcard photo.

7. Enhance your input fields with simple CSS tricks


The example you’re going to see is something that you use every day such as blog comment form.

8.Forms markup and CSS – Revisited

Just visit him and you will get form that look like this.


9. Fun with forms – customized input elements


Ever eager to match the look of your HTML forms with the rest of your website? This article will demonstrate how to apply customized backgrounds to HTML forms, while preserving stucturally clean markup and accesibility.

10. Semantic horizontal Forms


Semantically correct web forms with fieldsets, labels, legends and some CSS style. It has been tested in FF1.x, IE6 and Opera8. (but looks a little quirky in IE5.x although still usable).

11. Style:Phreak’s Standard Form Layout Revisited


How to make standard form layout

12. Tableless forms


Create beautiful web forms with CSS, what a good tutorial it is.


13. A form with style


With seven different style examples, where you can learn to code and create good looking forms.

14. A Simple Tableless Form


Use CSS to build your form and free from tables. Code examples are written in good-old-fashioned HTML instead of ASP.NET and do not contain validation, ID’s, etc. You will get the Continue with second part on their website, to learn how to send and receive that data – Staying in Touch – How to Build a Contact Form.

15. Make your forms beautiful with CSS


You will learn how to take a standard form and then make it special with some simple CSS tricks and techniques in this tutorial. You’ll improve the usability, aesthetics and layout, while picking the design cues up from the existing design elements.

16. Fancy Form Design Using CSS


How to make a fancy form design using CSS

17. How to create perfect form markup and style it with CSS


In this post you will be explained the choices when marking up the forms, and the CSS styling involved to making them cross-browser compatible.

18. Formy – CSS Form Framework


This is universal CSS forms who’ll interact in the simple natural way with HTML form and even without CSS HTML form will work decently well.

19. Background Images into Form Fields with CSS


Add some expressive background images to your HTML form which can be considered sometimes as a relevant point. with pure CSS, This can be done easily.

20. Changing Form Input Styles on Focus with jQuery


There are many forms which can be boring and plain, do not let yours blend in. This tutorial will teach you how to spice up with CSS classes and default values which change according to that form item is selected. Whole with just a splash of jQuery.

21. Improve form usability with auto messages


to improve FORM usability, you can use Animated auto. Then Scriptaculous is a great framework to use in this case.

22. Form field hints with CSS and JavaScript


It Is a basic example of how helpful a little JavaScript and CSS can be in a form only. Instead of the input hints always showing and potentionally cluttering a very simple form, only one of the hint for the currently focused input will show. This article will show you way to do this.

23. Nice & Clean Sliding Login Panel built with jQuery


This tutorial will guide you how to create sliding panel form using jQuery

24. Uni-Form


Uni-Form is an project to standardize form markup (xhtml) and CSS, “modularize” it, so even people with only basic knowledge of these technologies can get nice looking, well structured, highly customizable, accessible, semantic and usable forms.

25. “Select” Something New


With some creative CSS and little DOM scripting, you will be able to make your <select>s beautiful and you will not have to sacrifice the accessibility, usability or graceful degradation.