Flat UI Contact Form

Today, Designify would like to share a simple flat UI Contact form created by LokjeethSingh Sardar on cssdeck. This form is really simple to be implemented and can be fully customised to suit your site needs.

Flat UI Contact Form

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

 

How to use

<!DOCTYPE html>
<html lang="en" class="no-js">

    <head>

        <meta charset="utf-8">
        <title>Flat Contact Form</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- CSS -->
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Patua+One'>
        <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400'>
        <link rel="stylesheet" href="assets/css/reset.css">
        <link rel="stylesheet" href="assets/css/style.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -class="subject"->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body>

        <div class="page-container">
            <form class='contact-us' action="" method="post">
                <h1>Contact Us!</h1>
                <input type="text" name="name" class="name" placeholder="Name...">
                <input type="text" name="email" class="email" placeholder="Email...">
                <input type="text" name="subject" class="subject" placeholder="Subject...">
                <textarea name="message" class="message" placeholder="Message..."></textarea>
                <button type="submit">Send Message</button>
            </form>
        </div>

        <!-- Javascript -->
        <script src="assets/js/jquery-1.8.2.min.js"></script>
        <script src="assets/js/jquery.backstretch.min.js"></script>
        <script src="assets/js/scripts.js"></script>

    </body>

</html>

 CSS

/*
 *
 * Template Name: Flat Contact Form
 * Description: Flat Contact Form
 * Author: Luckkeyy Singh
 * Author URI: http://www.bloggingtronx.com
 *
 */

body {
    background: #eee;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 400;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

::-moz-selection { background: #f8cc37; color: #4b2813; text-shadow: 0 2px 0 #fce653; }
::selection { background: #f8cc37; color: #4b2813; text-shadow: 0 2px 0 #fce653; }

.page-container {
    margin: 0 auto;
    padding: 60px 0 20px 0;
}

.contact-us {
    position: relative;
    width: 400px;
    margin: 0 auto;
    background: #fbefbf;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.contact-us h1 {
    height: 80px;
    margin-bottom: 30px;
    background: #e67632;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    font-family: 'Patua One', cursive;
    font-size: 30px;
    color: #f8f8f8;
    text-transform: uppercase;
    line-height: 80px;
    text-align: center;
    text-shadow: 0 3px 0 #e15e28;
}

.contact-us input {
    width: 302px;
    height: 38px;
    margin: 0 0 20px 30px;
    padding: 0 18px;
    background: #fffbec;
    border: 1px solid #fffbec;
    -moz-box-shadow: 0 5px 0 0 #faedb5;
    -webkit-box-shadow: 0 5px 0 0 #faedb5;
    box-shadow: 0 5px 0 0 #faedb5;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #cc9471;
    outline: none;
}

.contact-us input:-moz-placeholder { color: #cc9471; }
.contact-us input:-ms-input-placeholder { color: #cc9471; }
.contact-us input::-webkit-input-placeholder { color: #cc9471; }

.contact-us textarea {
    width: 302px;
    height: 92px;
    margin: 0 0 20px 30px;
    padding: 10px 18px 0 18px;
    background: #fffbec;
    border: 1px solid #fffbec;
    -moz-box-shadow: 0 5px 0 0 #faedb5;
    -webkit-box-shadow: 0 5px 0 0 #faedb5;
    box-shadow: 0 5px 0 0 #faedb5;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 15px;
    color: #cc9471;
    outline: none;
}

.contact-us textarea:-moz-placeholder { color: #cc9471; }
.contact-us textarea:-ms-input-placeholder { color: #cc9471; }
.contact-us textarea::-webkit-input-placeholder { color: #cc9471; }

.contact-us button {
    width: 400px;
    height: 70px;
    margin-top: 14px;
    padding: 0;
    background: #f8cc37;
    border: 0;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
    font-family: 'Patua One', cursive;
    font-size: 24px;
    color: #4b2813;
    text-transform: uppercase;
    line-height: 70px;
    text-align: center;
    text-shadow: 0 2px 0 #fce653;
}

.contact-us button:hover {
    background: #e67632;
    color: #f8f8f8;
    text-shadow: 0 3px 0 #e15e28;
}

.contact-us input:focus,
.contact-us textarea:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.contact-us input,
.contact-us textarea,
.contact-us button {
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
}

.contact-us p {
    margin: 0 30px;
    padding-bottom: 30px;
    font-size: 15px;
    color: #cc9471;
    line-height: 30px;
}

.error {
    display: none;
    position: absolute;
    left: 390px;
    height: 44px;
    padding: 0 25px;
    background: #f8cc37;
    font-size: 15px;
    color: #4b2813;
    font-style: italic;
    line-height: 44px;
    white-space: nowrap;
    text-shadow: 0 2px 0 #fce653;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.error::before {
    content: '';
    position: absolute;
    top: 17px;
    left: -15px;
    border: 5px solid rgba(248, 204, 55, 0);
    border-right: 10px solid #f8cc37;
}

 

Related post:  Tutorial: Creating Simple Line Icons in Adobe Illustrator
Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *