CSS Form Sample 8

http://cssglobe.com/collections/forms/

by ducka

HTML

<h2>Form 4</h2>
        
        <form id="form4" action="/" method="post">    
        
            <h3>Contact Us</h3>
        
            <fieldset><legend>Contact form</legend>
                <p class="first">
                    <label for="name">Name</label>
                    <input type="text" name="name" id="name" size="30" />
                </p>
                <p>
                    <label for="email">Email</label>
                    <input type="text" name="email" id="email" size="30" />
                </p>
                <p>
                    <label for="web">Website</label>
                    <input type="text" name="web" id="web" size="30" />
                </p>                                                                                    
                <p>
                    <label for="message">Message</label>
                    <textarea name="message" id="message" cols="30" rows="10"></textarea>
                </p>                    
                
                <p class="submit"><button type="submit">Send</button></p>        
                            
            </fieldset>                    
                        
        </form>

CSS

/* form 4 */

    #form4{
        margin:1em 0;
        padding-top:1.5em;
        color:#246878;
        width:350px; /* customize width, this form have fluid layout */
        background:#fbfaf4 url(http://cssglobe.com/collections/forms/images/form4/form_bg.gif) repeat-y;        
        }
    #form4 h3{
        margin:0 20px;
        height:28px;
        text-indent:-8000px;
        background:url(http://cssglobe.com/collections/forms/images/form4/form_heading.gif) no-repeat 0 0;    
        }        
    #form4 fieldset{
        margin:0;
        padding:0;
        border:none;    
        padding-bottom:1em;
        }        
    #form4 legend{display:none;}    
    #form4 p{margin:.5em 20px;}    
    #form4 label{display:block;}    
    #form4 input, #form4 textarea{        
        width:302px;
        border:1px solid #dfdfdf;
        background:#fff;
        padding:5px 3px;
        }        
    #form4 textarea{
        height:125px;
        overflow:auto;
        }                    
    #form4 p.submit{
        text-align:right;
        }    
    #form4 button{
        margin:0;
        padding:0;
        text-indent:-8000px;
        overflow:hidden;
        width:88px;
        height:56px;
        border:none;
        background:url(http://cssglobe.com/collections/forms/images/form4/form_button.gif) no-repeat 0 0;
        cursor:pointer;
        text-align:left;
        }                

/* // form 4 */