Creating a nice designed HTML form without using images it’s not such difficult. Using CSS3 we can create shadows, rounded corners or even gradients. As we all know that you can’t see any shadow, rounded corners, gradients or other CSS3 stuff in Internet Explorer, this form design is good for CMS or internal pages where the public don’t have access. However, it’s not such bad looking either if you’re using IE, But please, don’t use IE6.

All others major browsers let us to view the amazing CSS3 features, so if you are using Opera, Firefox, Chrome or Safari you can enjoy this design.

Ok let’s take a look in the css code:
For the main box, the css3 elements are the shadow and the rounded corners. Using box-shadow: 0px 0px 10px #888, will create a shadow with 0px left offset, 0px top offset and 10px blur effect. The color of the shadow is #888. By changing the first 2 elements, you can move the shadow in every direction. I also used -moz-box-shadow and -webkit-box-shadow which will allow us to see this design in Mozilla Firefox and Safari or Chrome. How about those rounded corners? Using border-radius:10px, we don’t need anymore to slice up some images with these rounded corners and also we’ll have full control on changing the radius or the color or the border.

#form-container {
	background:#F9F9F9;

	border: solid 1px #ddd;

	border-radius:10px;

	-moz-border-radius: 10px; 

	-webkit-border-radius: 10px;

	box-shadow: 0px 0px 10px #888;

	-moz-box-shadow: 0px 0px 10px #888;

	-webkit-box-shadow: 0px 0px 10px #888;

	margin:0px auto;

	padding:15px;

	width:500px;
}

I used the rounded corners feature also creating the text inputs and the button, or the error and success message boxes. You can easy change whatever you want in this design, all the elements are created using css. A good things about this kind of design is that we don’t have any http requests for background images. This is an important thing and I’ll write more about this subject in a following post.

CSS code

body { font-family:Arial, Helvetica, sans-serif; font-size:13px; }

#form-container {
	background:#F9F9F9;

	border: solid 1px #ddd;

	border-radius:10px;

	-moz-border-radius: 10px; 

	-webkit-border-radius: 10px;

	box-shadow: 0px 0px 10px #888;

	-moz-box-shadow: 0px 0px 10px #888;

	-webkit-box-shadow: 0px 0px 10px #888;

	margin:0px auto;

	padding:15px;

	width:500px;
}

#form-container h2 { font-size:18px; color:#333; padding:0px; margin:0px 0px 10px 0px; }

fieldset, form { padding:0px; margin:0px; border:none }

#form-container .field  { clear:both; margin:0px; padding:10px 0px; }

label { width:120px; }

input[type=text], textarea {

	background:#fff;

	border:solid 1px #E5E5E5; 

	border-radius:5px;

	-moz-border-radius: 5px; 

	-webkit-border-radius: 5px;

	width:250px;
}
textarea { height:120px }

label, input[type=text], textarea { padding:9px 5px; float:left }

input[type=text]:focus, textarea:focus { background:#EDF3FC; padding:8px 5px; border:solid 2px #D5E3F9; }

.submit-button {
	background: #57A02C;

	border:solid 1px #86CC50;

	border-radius:5px;

		-moz-border-radius: 5px; 

		-webkit-border-radius: 5px;

	color:#FFF;

	cursor:pointer;

	font-size:13px;

	margin-left:130px;

	padding:3px 8px;
}
.submit-button:hover { background:#82D051 }

.error {background: #ffcece; border:solid 1px #df8f8f; }

.success {background: #d5ffce; border:solid 1px #9adf8f; }

.error, .success {

	border-radius:5px;

		-moz-border-radius: 5px; 

		-webkit-border-radius: 5px;

	color:#333;

	padding:9px;

	margin-bottom:10px;
}

HTML code



Submit your comment






Error message.


Success message.

Live demo

Click here for live demo.