Search This Blog

Monday, April 16, 2012

Enquiry form design html code and css








 Html Code:

<div class="contact_us" >
        <h2>We would love to hear from you</h2>
        <form id="form1" name="form1" method="post" onSubmit="return validate();">
         <div class="text"> Name <span class="star_link">*</span> </div>
          <div class="input_field"><input  name="name" type="text" class="input_txt"  id="textfield"  />    </div>
                  <div class="text"> Email <span class="star_link">*</span> </div>
          <div class="input_field"><input  name="name" type="text" class="input_txt"  id="textfield"  />    </div>
         
           <div class="text"> Phone <span class="star_link">*</span> </div>
          <div class="input_field"><input  name="name" type="text" class="input_txt"  id="textfield"  />    </div>

          <div class="text"> Feedback <span class="star_link">*</span> </div>
          <div class="textarea_field"><label>

                <textarea name="message" id="textarea" cols="45" rows="5" class="textarea_txt"></textarea>

              </label>  </div>           
          

     
      <div class="submit">  <input type="image" src="images/submit.gif" name="button" id="button" value="Submit"  /></div>
             
    </form>    

  </div>

 Css:

 .contact_us{
    float:left;
    width:320px;
    height:auto;
    margin:10px;
    border-right: #bebebe dashed 1px;
}

    .contact_us h2{
        font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    color:#03aedd;
    margin:0px;
    padding:0px 0px 3px 0px;
    font-weight:normal;

}
.contact_us h2 span{
    font-family: Arial, Helvetica, sans-serif;
    font-size:20px;
    color:#333;
    font-weight:normal;
  
  
}
      .text_area
{
               width:412px;
                height:115px;
                background:none;
                border:none;
                padding:3px 10px 9px 5px;
                overflow:auto;
                margin:0 0 4px 0px;
                display:block;
                color:#6b6a6a;
    background: url(../images/comment.png) no-repeat left top;
    }
    .star_link {
    color: #FF0000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    text-decoration: none;
    margin:0px;
    padding:0px;
}
          
.text
{
    margin:0px;
    padding:8px 0px;
        color:#6b6a6a;
  
}

.input_field
{
  
    width:302px;
    height:26px;
 color:#6b6a6a;
 margin:0px;
 padding:0px;
background: url(../images/form_bg.png) no-repeat  left top;
            }
.input_txt
{
  
    width:288px;
    height:26px;
 color:#6b6a6a;
 margin:0px;
 padding:0px 5px 0px 5px;
 background:none;
 border:none;
 outline:none;
  
              
            }
            .textarea_field
{
width:302px;
height:75px;
color:#6b6a6a;
 margin:0px;
 padding:0px;
background: url(../images/comment.png) no-repeat  left top;
            }
            .textarea_txt
{
  
        width:288px;
height:65px;
 color:#6b6a6a;
 margin:0px;
 padding:5px 5px 5px 5px;
 background:none;
 border:none;
 outline:none;
  
              
            }
.submit
{
    padding:0px;
    margin:8px 0px 0px 0px;
        color:#6b6a6a;
        width:101px;
        height:26px;
  
}




No comments:

Post a Comment

Validating to select in sequencial order using angular

    < input type = "checkbox" (change) = "handleSelectTaskItem($event, taskItem)" [checked] = " taskItem . i...