Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Form CSS: Here

Corporate CSS Tableless form

Author: Dynamic Drive

This is an elegant tableless CSS form template with a decidedly corporate look and feel. The most commonly used form elements with corresponding legends are added in to get you up and going quickly. Structurally the CSS form is made up of two "columns"- a left stylized "legend" column, plus a right DIV column enclosing the actual form field. Both columns are floated "left" and then put inside a "row" DIV that equalizes the two columns' divergent heights so the tallest one wins out.

The form is responsive in that it expands to take advantage of the full horizontal space of the page when the window is 480px or less, or that of most smart phones.

Demo:


*Note: Please make sure it's correctly entered!
* Please check all that apply.

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 11/27/2008

Revision History: 06/10/2013 Form now responsive, adapting to windows 480px or less.

Usage Terms: Click here

Your Comments (32)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 4 pages  1 2 3 >  Last »

Awesome! Keep the forms coming!

(btw, it'd be great if there were some cool submit/reset button images accompanying them)
Posted by AMNET CSS on 11/30, 03:30 PM
If you are going to use a list to display the radio buttons and checkboxes, at least style them without showing the bullets.

As you have it, they are a little odd and disorienting.
Posted by Greg on 12/02, 10:58 AM
Agreed with comment above (@ Greg). Form elements with list bullets shouldn't be used. Aesthetically isn't pleasing. Otherwise a good corporate feel to the form and nicely coded (except the list style)
Posted by Osiris on 12/06, 02:00 PM
I think it looks very clean. Going to use the concept on my site in different colors.
Posted by Pappas Piano on 12/06, 11:48 PM
mgk kfls;
Posted by mody23 on 12/17, 06:34 PM
Check out my web site at http://expressions.sharepointsite.net

DO NOT ADD A WWW because it wouldn't work. I have added some Dynamic Drive content and want you to give some feedback at my homepage.
Posted by Eric on 12/17, 08:08 PM
First, thank you... this is awesome!!! So I've placed a little newsletter on my website (using your html code but modified to remove what I dont need). But how do I gather what users enter? That is, when someone enters an email... where does it go? Can I have the submit button send the info entered to my email address? Sorry if this is a silly question, i'm a novice.
Posted by Shane Spitzer on 12/17, 11:22 PM
You have to use a server-side scripting language, such as php. If you give me the html you're using, I can write the script for you.

first, the form tag would need something like this:
<form class="feedbackform" action="process.php" method="post"


then it would look something like this:
<?php
$name 
$_REQUEST['username';
$email $_REQUEST['email';
...
mail('youremail@domain.com',$sub,$msg,$header)
...
?> 


you have to have php installed on your server as well. for that, you would have to check with your host.
Posted by KBjr on 12/18, 05:25 PM
fdsfds=s
fs'd
fdsf
dsf
dsf
dsf
dsfdsf
Posted by rajkumar on 12/22, 12:28 AM
salut
Posted by driss on 12/23, 02:27 PM

Comment Pages 1 of 4 pages  1 2 3 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.