Dark Contact Form Styling with CSS

07.26.2013 by Ilia Raiskin

HTML CSS

In this tutorial we'll show you how to create a dark, gray contact form with CSS and HTML. Note that this is only a styling tutorial, so the contact form will not be functional.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Dark Contact Form CSS Styling Tutorial Demo</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="page-content">
<h1>Contact Form</h1>
<form class="contact-form">
<label for="name">Your Name: <span class="required">*</span></label>
<input type="text" class="text-input" name="name"/><br/>
<label for="email">Your Email Adress: <span class="required">*</span></label>
<input type="text" class="text-input" name="email"/><br/>
<label for="message">Your Message: <span class="required">*</span></label>
<textarea name="message">
</textarea><br/>
<input type="submit" value="Send" class="send"/>
</form>
</div>
</body>
</html>

Note that we use the Open Sans font from Google Web Fonts.

CSS

body {
padding: 0;
margin: 0;
background: #4D4D4D;
}

.page-content {
width: 920px;
background: #494949;
padding: 40px;
margin: 0 auto;
font-family: Helvetica;
-webkit-font-smoothing: antialiased;
color: #3C3C3C;
font-size: 100%;
margin-bottom: 40px;
margin-top: 40px;
}

h1 {
color: white;
-webkit-font-smoothing: antialiased;
font-size: 300%;
margin-bottom: 30px;
margin-top: 0px;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.contact-form .text-input {
border: none;
padding: 10px 15px;
background: rgb(60, 60, 60);
color: white;
font-size: 120%;
font-family: "Open Sans", Helvetica, sans-serif;
outline: none;
margin: 10px 0px;
-webkit-font-smoothing: antialiased;
-webkit-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

.contact-form textarea {
background: rgb(60, 60, 60);
resize: none;
padding: 15px;
height: 175px;
width: 400px;
margin: 10px 0px;
color: white;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 120%;
border: none;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}

.contact-form input:focus, .contact-form textarea:focus{
background: rgb(51, 47, 47);
}

.contact-form .send{
border: none;
background-color: rgb(54, 54, 54);
color: white;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 105%;
padding: 10px 20px;
width: 140px;
height: 50px;
-webkit-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
margin: 10px 0px;
cursor:pointer;
-webkit-font-smoothing: antialiased;
}

.contact-form .send:hover {
background-color: rgb(36, 36, 36);
}

.contact-form label {
color: white;
-webkit-font-smoothing: antialiased;
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 105%;
margin-top: 20px;
display: block;
}

span.required{
color:red;	
}

You can leave out -webkit-font-smoothing. It improves the font rendering in WebKit browsers.

Did you like this post? Any feedback is highly appreciated. Feel free to leave a comment.

About the author

Ilia Raiskin

Ilia Raiskin is a web designer, web developer, blogger and founder of Toolinfy.com.

Dark Contact Form Styling with CSS

HTML

CSS

Did you like this post? Any feedback is highly appreciated. Feel free to leave a comment.

About the author

Ilia Raiskin

Follow & Subscribe

About us

Info