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

 

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;
}

 

Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close