Pure CSS and DIV based Contact Us form design


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:

FF - Pure CSS and DIV based Contact Us form design

FF – Pure CSS and DIV based Contact Us form design


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>
        <title>Contact Us</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
				font-family:Verdana, Arial, Helvetica, sans-serif;
			p, h1, form, button{border:0; margin:0; padding:0;}
			.spacer{clear:both; height:1px;}

			/* ----------- My Form ----------- */
				margin:0 auto;

			/* ----------- 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 {
			#form-wrapper p{
				border-bottom:solid 1px #7E7E7E;
			#form-wrapper label{
			#form-wrapper .small{
			#form-wrapper input,#form-wrapper textarea{
				border:solid 1px #aacfe4;
				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;
        <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>
                <input type="text" name="name" placeholder="Mahesh Prasad" id="name" />

                <label for="email">Email
                    <span class="small">Add a valid address</span>
                <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>
                <input type="text" name="phone" placeholder="8888888888" id="phone" />

                <label for="web">Web-site
                    <span class="small">Add your web-site url</span>
                <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>
                <textarea placeholder="Write something to us" name="message" id="message"  rows="5"></textarea>

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



jQuery Multi Level Popup Menu

1 Comment

Description: Enhance arbitrary links on your page with some multi level powers with jQuery Multi Level Popup Menu! It lets you associate a multi level drop down menu to any link on the page, so moving the mouse over the link activates the menu to be shown beside it. Each pop up menu is simply defined as a regular nested UL on the page, making it very intuitive to set up, not to mention the menus search engine friendly! Lets run down the script’s features:

  • Lets you extend any link on the page with a multi level pop up menu, by inserting the custom attribute data-popupmenu inside the link.
  • Each pop up menu is simply defined as a regular, hidden nested UL on the page.
  • Sub Menus repositions themselves when too close to the right or bottom edges of the browser window so they remain in view.
  • Ability to customize the expand animation speed.
  • Ability to specify the delay before each menu and its sub menus appear/ disappear when the mouse rolls over and out of them.

When it comes to menus, popping up is a good thing!

Dynamic Drive

Webmaster Resources

Read full entry here»


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»


Mastering CSS Coding: Getting Started

Leave a comment

CSS has become the standard for building websites in today’s industry. Whether you are a hardcore developer or designer, you should be familiar with it. CSS is the bridge between programming and design, and any Web professional must have some general knowledge of it. If you are getting your feet wet with CSS, this is the perfect time to fire up your favorite text editor and follow along in this tutorial as we cover the most common and practical uses of CSS.

Overview: What We Will Cover Today

We’ll start with what you could call the fundamental properties and capabilities of CSS, ones that we commonly use to build CSS-based websites:

  1. Padding vs. margin
  2. Floats
  3. Center alignment
  4. Ordered vs. unordered lists
  5. Styling headings
  6. Overflow
  7. Position

Once you are comfortable with the basics, we will kick it up a notch with some neat tricks to build your CSS website from scratch and make some enhancements to it.

  1. Background images
  2. Image enhancement
  3. PSD to XHTML

Read full entry here»


Object-Oriented CSS: What, How, and Why

Leave a comment

What is Object-Oriented CSS?

Object-oriented CSS, at its core, is simply writing cleaner, DRYer CSS. It’s not a different language: still the same old CSS we all know and love. It’s just a paradigm shift. Really, object-oriented CSS is a few simple patterns and best practices.

So why call it object-oriented? Well, according to Wikipedia,

Object-oriented programming (OOP) is a programming paradigm that uses “objects” — data structures consisting of datafields and methods — and their interactions to design applications and computer programs.

If we were to re-write that definition for object-oriented CSS, it might say something like this:

Object-oriented CSS is a coding paradigm that styles “objects” or “modules”—nestable chunks of HTML that define a section of a webpage—with robust, reusable styles.

This basically means that you have a standard “object” (an HTML structure). Then, you have CSS classes that you apply to objects, which define the design and flow of the object.

Confused? Let’s look a bit of theory.

Read full entry here»


Create CSS Based Beautiful Sitemaps with SlickMap CSS

Leave a comment

SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

The general idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

  • Eliminates the need for additional software
  • Easily revised with clients on-the-fly
  • Clickable anchors with visible URLs
  • Design process results in working HTML code

Website: http://astuteo.com/slickmap/

Demo: http://astuteo.com/slickmap/demo/

%d bloggers like this: