Home

Pure CSS and DIV based Contact Us form design

2 Comments

Pure CSS and DIV based Contact Us form design

Here is how you can design Pure CSS and DIV based Contact Us form design.

I have used simple design, it is not much complited to understand.

Here is how it look like:
1.)FF

FF - Pure CSS and DIV based Contact Us form design

FF – Pure CSS and DIV based Contact Us form design

2.)Chrome

Chrome - Pure CSS and DIV based Contact Us form design

Chrome – Pure CSS and DIV based Contact Us form design

3.) IE

IE - Pure CSS and DIV based Contact Us form design

IE – Pure CSS and DIV based Contact Us form design

Full HTML with CSS source code:
Modify border and colors as you like.


<!DOCTYPE html>
<html>
    <head>
        <title>Contact Us</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
			body{
				font-family:Verdana, Arial, Helvetica, sans-serif;
				font-size:14px;
			}
			p, h1, form, button{border:0; margin:0; padding:0;}
			.spacer{clear:both; height:1px;}

			/* ----------- My Form ----------- */
			.myform{
				margin:0 auto;
				width:509px;
				padding:14px;
			}

			/* ----------- form-wrapper ----------- */
			#form-wrapper{
				background: none repeat scroll 0 0 #C6C6C6;
				border: 2px solid #8B8B8B;
				border-radius: 10px;
				-moz-border-radius: 10px;
				-op-border-radius: 10px;
				-webkit-border-radius: 10px;
			}
			#form-wrapper h1 {
				font-weight:bold;
				margin-bottom:8px;
			}
			#form-wrapper p{
				font-size:11px;
				color:#666666;
				margin-bottom:20px;
				border-bottom:solid 1px #7E7E7E;
				padding-bottom:10px;
			}
			#form-wrapper label{
				display:block;
				font-weight:bold;
				text-align:right;
				width:193px;
				float:left;
			}
			#form-wrapper .small{
				color:#666666;
				display:block;
				font-size:11px;
				font-weight:normal;
				text-align:right;
				width:193px;
			}
			#form-wrapper input,#form-wrapper textarea{
				float:left;
				border:solid 1px #aacfe4;
				width:284px;
				margin:2px 0 20px 10px;
				border-radius: 15px;
				-moz-border-radius: 15px;
				-op-border-radius: 15px;
				-webkit-border-radius: 15px;
				font-size: 14px;
			}

			#form-wrapper input{
				height: 25px;
				padding: 4px 10px;
			}
			#form-wrapper textarea{
				padding: 10px 10px;
				overflow: auto;
			}
			/* ----------- Form Button ----------- */
			#form-wrapper button {
			   background: #2c3e4a;
			   background: -webkit-gradient(linear, left top, left bottom, from(#919496), to(#2c3e4a));
			   background: -webkit-linear-gradient(top, #919496, #2c3e4a);
			   background: -moz-linear-gradient(top, #919496, #2c3e4a);
			   background: -ms-linear-gradient(top, #919496, #2c3e4a);
			   background: -o-linear-gradient(top, #919496, #2c3e4a);
			   padding: 5px 10px;
			   -webkit-border-radius: 15px;
			   -moz-border-radius: 15px;
			   border-radius: 15px;
			   margin-left: 315px;
			   color: white;
			   font-size: 20px;
			   text-decoration: none;
			   vertical-align: middle;
			}
			#form-wrapper button:hover {
			   background: #3d4b54;
			   color: #ccc;
			}
        </style>
    </head>
    <body>
        <div id="form-wrapper" class="myform">
            <form id="form" name="form" method="post" action="index.html">

                <h1>Contact Us</h1>
                <p>Please complete the form bellow.</p>

                <label for="name">Name
                    <span class="small">Add your name</span>
                </label>
                <input type="text" name="name" placeholder="Mahesh Prasad" id="name" />

                <label for="email">Email
                    <span class="small">Add a valid address</span>
                </label>
                <input type="text" name="email" placeholder="mail@example.com" id="email" />

                <label for="phone">Phone
                    <span class="small">Add valid 10 digit your mobile no.</span>
                </label>
                <input type="text" name="phone" placeholder="8888888888" id="phone" />

                <label for="web">Web-site
                    <span class="small">Add your web-site url</span>
                </label>
                <input id="web" type="text" placeholder="http://www.example.com" name="web" id="web">

                <label for="message">Message
                    <span class="small">Write something to us</span>
                </label>
                <textarea placeholder="Write something to us" name="message" id="message"  rows="5"></textarea>

                <button type="submit">Send</button>
                <div class="spacer"></div>

            </form>
        </div>
    </body>
</html>

Advertisements

12 Excellent jQuery Plugins for Enhancing Forms

Leave a comment

Forms are part of almost every website. Whether it’s a simple contact form or a complex sign-up form, filling one out is usually a mundane task. When possible, you should try to make form completion for the user easier and more enjoyable. Here are 12 jQuery plugins that can help you enhance your forms.

Read full entry here»

http://webdesignledger.com/resources/12-excellent-jquery-plugins-for-enhancing-forms

%d bloggers like this: