Just about every modern website has that nice slick looking contact page. So why should your website be any different? I’ve laid down the css to “prettify” the base elements of any html form. I’ve written the css to be dynamic, and made comments where you should should change colors to fit your websites theme. I would also like to note that this form style works best on top of a white background. I have included a demo of this form style along with a download of all the source files. I tried to keep the styling to a minimum as I want these to simply be the base styles that you use on your forms, and they are intended to be heavily modified to fit your design.
The html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Break the Network | Slick css form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Slick css form by Matt Rheault" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="assets/css/screen.css" />
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:100' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper">
<form class="form" method="post" action="#">
<h2 id="form-heading">Slick css form</h2>
<p>
<input type="text" id="fname" name="fname" size="40" /></p>
<p>
<input type="text" id="lname" name="lname" size="40" /></p>
<p>
<input type="text" id="email1" name="email1" size="40" /></p>
<p>
<input type="text" id="email2" name="email2" size="40" /></p>
<p>
<input type="text" id="title" name="title" size="70" /></p>
<p>
<textarea rows="10" cols="100" id="message" name="message"></textarea></p>
<p><input type="submit" value="Submit" id="submit" name="submit" /> <input type="reset" value="reset" id="reset" name="reset" /></p>
<p><hr /></p>
<p>* indicates required fields.*</p>
</form>
</div>
</body>
</html>
The css
I’d like to note that I am only providing the css for the .form class here. The .form class is to be used in the <form> element. In the demo you will notice that there is more in the screen.css, however this is just for looks and is only necessary for my specific demo.
.form {
padding: 30px;
background: #fff url("../images/form.jpg") repeat-x;
border: 1px solid #bbb;
/*
box shadow optional and looks best ontop of a textured background
*/
-moz-box-shadow: 0 0 10px #bbb;
-webkit-box-shadow: 0 0 10px #bbb;
box-shadow: 0 0 10px #bbb;
}
.form p {
margin: 10px 0;
font-size: 14px;
color: #404040;
}
/*
h2 tag is optional, if you do use this you are going to need to put the follow line in the header of your html
*/
.form h2, .form h3, .form h3, .form h4, .form h4, .form h5, .form h6 {
margin: 0 0 30px 0;
padding: 0 0 0 40px;
color: #888;
border-bottom: 1px solid #d0d0d0;
font-family: 'Raleway', arial, serif
}
.form fieldset {
padding: 10px;
border: 1px solid #d0d0d0;
}
.form legend {
padding: 0 6px;
}
.form hr {
background-color: #d0d0d0;
border: 0;
color: #d0d0d0;
height: 1px;
}
.form input, .form textarea {
padding: 4px;
background: #fff;
border: 1px solid #d0d0d0;
outline: none;
}
.form input:focus, .form textarea:focus {
border: 1px solid #516527; /*Change color to fit theme of your site*/
}
input[type=button], input[type=submit], input[type=reset], button, .button {
display: inline-block;
background: #d0d0d0 url("../images/btn.bg.png") repeat-x 0px 0px;
padding:5px 10px 6px 10px;
font-weight:bold;
border:1px solid #888;
border-radius: 5px;
-moz-border-radius: 5px;
-moz-box-shadow: 0 0 3px #888;
-webkit-box-shadow: 0 0 3px #888;
box-shadow: 0 0 3px #888;
text-shadow: 1px 1px &35;fff;
}
input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover, button:hover, .button:hover {
background:#e0e0e0 url("../images/btn.bg.png") repeat-x 0px 0px;
color: #516527; /*Change color to fit theme of your site*/
cursor: hand;
cursor: pointer;
}
Conclusion
About the Author
Matt Rheault - Matt is the founder and current owner of Break the Network. He is a Computer Science major at the University of Massachusetts, and has a passion for Web Design and Development. Matt has a keen understanding of the correlation between UI design and application. So you can always expect to see a wide range of topics in the articles he writes. » Read more from this author
3 Comments
I don’t see any place in the code where to put an e-mail address where all the messages will be sent to.
That’s because I only provided you with the html and css markup for this form. If we wanted it to be functionable we would have to define and action for the form and write a php for mailer script.
the purpose of this is simply to provide you with an all purpose css styling for your websites contact form.
I love the simple but slick layout. Thanks for sharing!
4 Trackbacks
[...] Free sharp css form [...]
[...] 11. Free slick css form [...]
[...] 19. Free slick css form [...]
[...] 22.??????CSS?? [...]