E Online Support - Free Software Download
How can i design contact form using css?
I want to design contact form using css,is that possible?
Shruti
Answer
1

First we want to conceptualize what our form is going to look like and how it is going to function. For this example, let's create a simple contact form that asks for the following information from the user: Name Email Website Message
HTML File: form1.html


<!DOCTYPE html>
<html>
<head>
<title>Icon inside Input Field - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<!-- Include CSS File Here -->
<link href="css/form1.css" rel="stylesheet">
</head>
<body>
<div id="first">
<img id="logo" src="images/logo.png">
<label>Full Name :</label>
<input id="fname" placeholder="Full Name" type="text">
<label>Email :</label>
<input id="email" placeholder="Email" type="text">
<label>Contact Number :</label>
<input id="contact" placeholder="Contact Number" type="text">
<label>Address :</label>
<input id="address" placeholder="Address" type="text">
<input id="submit" type="submit" value="Submit">
</div>
</body>
</html>


CSS File: form1.css


@import "http://fonts.googleapis.com/css?family=Raleway";
body{
font-family:'Raleway',sans-serif
}
img#logo{
margin-left:90px
}
div#first{
width:350px;
height:auto;
margin:50px auto 0;
padding:50px;
background-color:#EEE;
color:#333;
border:2px solid #C2D6FF;
border-radius:40px 0 40px 0
}
label{
font-size:15px;
font-weight:700
}
input#fname{
background-image:url(../images/icon_name.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
margin-top:10px;
margin-bottom:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser */
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser */
}
input#email{
background-image:url(../images/email.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
margin-top:10px;
margin-bottom:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser */
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser */
}
input#contact{
background-image:url(../images/mobile.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
margin-top:10px;
margin-bottom:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser */
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser */
}
input#address{
background-image:url(../images/home.png);
background-repeat:no-repeat;
background-position:6px;
border:1px solid #DADADA;
margin-top:10px;
margin-bottom:10px;
padding-left:35px;
width:310px;
height:30px;
font-size:14px;
box-shadow:0 0 10px;
-webkit-box-shadow:0 0 10px;
/* For I.E */
-moz-box-shadow:0 0 10px;
/* For Mozilla Web Browser */
border-radius:5px;
-webkit-border-radius:5px;
/* For I.E */
-moz-border-radius:5px
/* For Mozilla Web Browser */
}
input#submit {
background-color:#cc7a66;
border-radius:5px;
border:none;
padding:10px 25px;
color:#FFF;
text-shadow:1px 1px 1px #949494;
margin-left:120px
}
input#submit:hover{
background-color:#FF9980
}
Question*:
Description*:
Script:
Related To:
 PHP    HTML    CSS    JAVASCRIPT    JQUERY   
 AJAX    WINDOWS    GAMES    DRIVERS    MAC   
 LINUX    MOBILE    GADGETS   
Security Code:
6468
Enter Security Code:
 
Facebook   Linkedin   Skype   Twitter