CSS Form

In this tutorial, you will learn how to create a beautiful form with pop up message boxes using CSS & Jquery.

Contact Us Form
Name ›	Enter Your Full Name
Email ›	Your Active Email Address
Address ›	Enter Your Full Address
Username ›	Type a username for this site
Password ›	More than 8 Characters long

This is a " Contact Us Form " created using tables. The table has two columns. The left column contains all the labels for the input fields on the right column.
CSS3 has been used to decorate the forms.
Message box will pop out when cicked on the input fields (Give it a try !!).

This form is supported by all the browsers supporting CSS3.
This form will function different on IE8 and lower versions as it has very less support for CSS3.

Browser Support	»
Language	»	CSS3, HTML4 & jQuery
Difficulty	»	Intermediate
Estimated Completion Time	»	30 minutes.

Steps For Creating the CSS Form

Create the Form
Create Popup Message element
Style the Form using CSS
Jquery to trigger and Animate the popup.

Step 1 : Creating the Form

The Forms are normally created in tabular format so we will create the Form using the tables.
The table will have two columns. One for Labelling the Input fields. The other one for the input field element.

Here how it looks without CSS Styling.

Contact Us Form
Name ›
Email ›
Address ›
Username ›
Password ›

Step 2 : The Popup Message Elements

Now we will add Input Field related messages inside span tag elements, right next to the Input Fields.
These span tag elements will act as the popup messages.

Contact Us Form
Name ›	Enter Your Full Name
Email ›	Your Active Email Address
Address ›	Enter Your Full Address
Username ›	Type a username for this site
Password ›	More than 8 Characters long

Here's the HTML Code for the Table

Notice the table has an id="form_table".
We'll use this id later for styling the form and triggering the popups using jQuery.


<form name=form1 method=post action=>
<table border=0 id=form_table>
<caption>Contact Us Form</caption>
  <tr>
    <th width=25%>Name &#8250;</th>
    <td>
        <input type=text name=name>
        <span>Enter Your Full Name</span>
    </td>
  </tr>
  <tr>
    <th>Email &#8250;</th>
    <td>
    <input type=text name=email>
    <span>Your Active Email Address</span>
    </td>
  </tr>
  <tr>
    <th valign=top>Address &#8250;</th>
    <td>
    <textarea type=text name=address style=height:80px>
    </textarea><span>Enter Your Full Address</span></td>
  </tr>
  <tr>
    <th>Username &#8250;</th>
    <td>
    <input type=text name=username>
    <span>Type a username for this site</span>
    </td>
  </tr>
  <tr>
    <th>Password &#8250;</th>
    <td>
    <input type=password name=password>
    <span>More than 8 Characters long</span>
    </td>
  </tr>
  <tr>
    <th> </th>
    <td>
    <input type=submit name=submit value=Submit Form>
    <input type=reset name=reset>
    </td>
  </tr>
</table>
</form>

Step 3 : Style the Form Using CSS

Now we'll convert the ordinary looking Contact Form into a Cool looking form using CSS Stylesheet.
We will use a background image for the caption element and add some height and width to it.
The input textboxes and the textarea have round corners and about 2 pixels thick grey colored border.
The background color will also change when these fields are foucused.
The Submit and Reset Buttons have same width and the same background color as the input fields.

Here's the CSS Code for the Form

Paste this code inside the head tags.

<style type=text/css>

#form_table{
	background:#2c2c2c;
	border:4px solid #0170e4;
	width:450px;
	margin: 30px auto;
	font-family: arial;
	color:#fff;
	}
#form_table th {
	text-align: right;
	color: #eee;
	font-size: 14px;
	}
#form_table td {
	position: relative;
	width: 40%;
	}
#form_table caption {
	background:url(images/caption.jpg) center left;
	height: 58px;
	 line-height: 58px;
	 width: 450px;
	 font-size: 21px;
	 font-weight: bolder;
	 }
#form_table input, #form_table textarea {
	width: 250px;
	background-color: #353535;
	display: inline;
	color: #ddd;
	border:2px solid #444;
	margin:2px 5px;
	font-family: arial;
	height: 28px;
	font-size: 13px;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
}
#form_table input[type=submit], #form_table input[type=reset] {
	width: 120px;
	}
#form_table input:focus, #form_table textarea:focus{
	background:#555;
	}
#form_table input + span, #form_table textarea + span {
	display: none;
	background:url(images/message2.png) no-repeat center left;
	line-height: 32px;
	font-size: 12px;
	font-weight: bold;
	color: #000;
	padding:0px 20px;
	position: absolute;
	width: 180px;
	z-index:99;
	}
 
</style>

The Explanation
Line 3 › #form_table {
→ Selector of the table having id="form_table".
→ Properties like background color, border size and color, width are defined here.

Line 11 › #form_table th {
→ Selects the th tags of the table.
→ White colored text is applied to the table heading.

Line 16 › #form_table td {
→ Selects the td tags of the table.
→ Width and Relative position are defined here for the td tags.
→ Relative position is important here, it will help to position the span elements later.

Line 20 › #form_table caption {
→ For selecting the caption tag element.
→ Background image, width, height etc. are declared here for the caption tag.

Line 28 › #form_table input, #form_table textarea {
→ Here a comma is used between the two selectors to apply same set of properties.
→ Properties like border, backgound, width etc are defined here.
→ Rounded Corners have been used here for the text and textarea fields.

Line 42 › #form_table input[type=submit], #form_table input[type=reset] {
→ For selecting the input fields with type="submit" and type="reset".
→ Same width is applied to the submit and reset buttons.

Line 45 › #form_table input:focus, #form_table textarea:focus{
→ When the input or the textarea fields gets focused their background color will change to a lighter shade.

Line 48 › #form_table input + span, #form_table textarea + span {
→ For Selecting the span elements right next to the input and textarea fields.
→ Background is added to the span element.
→ By default span element will be hidden from view (using Display Property) until the input field is focused.

Step 4 : Apply jQuery For Popups

The span elements are hidden from view now. We will make them appear only when the field is focused.
For the Popup Effect, jQuery Library needs to be included in the webpage.

Include jQuery Library

jQuery can be downloaded from › jQuery.com ‹.

We will include jQuery inside the <head> tags.
Here's the code:

<head>

   <script type=text/javascript src=jquery-1.5.2.min.js ></script>
 
</head>

There's an alternate way to include jQuery Library on the webpage without downloading jQuery file.
This can be done by adding src attribute to the script tag.
Set the value of src attribute to "http://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js";

<head>

   <script type=text/javascript src=http://ajax.googleapis.com/
   ajax/libs/jquery/1.4.2/jquery.min.js ></script>
 
</head>

The jQuery Code

This code will make the span elements right next to the input and textarea fields Popup.
Paste this code inside the head tags.

<script type=text/javascript >

$(document).ready(function(){
  $(input,textarea).focus(function () {
         $(this).next(span).show(slow).css(display,inline);
    });
  $(input,textarea).focusout(function () {
         $(this).next(span).hide(slow);
    });
});
 
</script>

The Explanation

Line 3 › $(document).ready(function(){
→ This function will run only when the page(document) loads completely.

Line 4 › $(input,textarea).focus(function () {
→ This function selects the the input and textarea fields.
→ This function runs only when the fields are focused with cursor.

Line 5 › $(this).next(span).show(slow).css(display,inline); });
→ The span element right next to the fields will pop out.
→ The Pop up Effect will show up slowly.
→ Display Inline property is added to the span element, so the message pops out from the right side.

Line 7 › $(input,textarea).focusout(function () {
→ This function runs when foucusout event occurs on input or textarea .

Line 8 › $(this).next(span).hide(slow);
→ The Pop up Effect will hide slowly.

Click Here to Download the CSS Form Example

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.