Create a flat colorful contact form with HTML and CSS

10.26.2013 by Ilia Raiskin

HTML CSS Design

In this styling tutorial we'll be creating a flat and colorful contact form with HTML and CSS. Note that this is only a styling tutorial. The form will not work.

Demo Download

Code

I use the Montserrat font from Google fonts. As you can see I just used the style tag. I'd recommend splitting up the code in an HTML and a separate CSS file.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Create a flat colorful contact form with HTML and CSS Demo</title>
<meta name="description" content="Create a flat colorful contact form with HTML and CSS Demo" />
<meta name="author" content="Toolinfy" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<style>

body {
padding: 0;
margin: 0;
background: #F3F3F3;
}

.page-content {
width: 920px;
background: #FFFFFF;
padding: 40px;
margin: 0 auto;
font-family: "Montserrat", Helvetica;
-webkit-font-smoothing: antialiased;
color: #555555;
font-size: 100%;
margin-bottom: 40px;
margin-top: 40px;
font-weight: normal;
-moz-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.06);
-webkit-box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.06);
box-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.06);
}

h1 {
color: rgb(231, 102, 41);
-webkit-font-smoothing: antialiased;
font-size: 300%;
margin-bottom: 30px;
margin-top: 0px;
font-family: "Montserrat", Helvetica, Arial, sans-serif;
}

.contact-form {
padding: 40px;
background: rgb(250, 250, 250);
}

.contact-form .text-input {
padding: 15px 10px;
display: block;
width: 290px;
margin-bottom: 20px;
margin-top: 10px;
border: 2px solid rgb(240, 240, 240);
outline: none;
font-size: 90%;
font-family: "Montserrat", Helvetica;
-webkit-font-smoothing: antialiased;
color: rgb(151, 149, 149);
font-weight: normal;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.contact-form .text-input:focus {
border: 2px solid rgb(221, 221, 221);
}

.contact-form textarea {
padding: 20px 10px;
width: 290px;
border: 2px solid rgb(240, 240, 240);
margin-top: 10px;
margin-bottom: 20px;
min-height: 80px;
outline: none;
font-family: "Montserrat", Helvetica;
font-size: 90%;
color: rgb(141, 141, 141);
-webkit-font-smoothing: antialiased;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.contact-form textarea:focus {
border: 2px solid rgb(221, 221, 221);
}

.contact-form label {
display: block;
background: rgb(11, 198, 214);
color: white;
padding: 10px;
width: 294px;
}

.contact-form input.send {
border: none;
font-family: "Montserrat", Helvetica;
padding: 15px 50px;
font-size: 100%;
color: white;
background: rgb(218, 107, 6);
cursor:pointer;
-webkit-font-smoothing: antialiased;
-webkit-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.contact-form input.send:hover {
background: rgb(60, 60, 60);
}
</style>
</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>

About the author

Ilia Raiskin

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

Create a flat colorful contact form with HTML and CSS

Code

About the author

Ilia Raiskin

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

Follow & Subscribe

About us

Info