This code segment emphasize on creating input form elements that consists of Icons. There is Email field, Name Field, Contact Name and Address fields so we have to put icon inside the form fields.

To put icon inside the form field, we have to fetch form field using id and then use CSS to set background inside the form fields using it’s background properties :

background-image:url(.....);
background-repeat:no-repeat;
background-position:6px;

So, just view its  Live Demo , download the code and attach it to your website to make  it attractive.

input-form-fields-element-having-icon

Download script   

 

HTML File: formicon.html

We are creating a contact form using HTML. Form is defined in Div name “first”.

 


<!DOCTYPE html>
<html>
<head>
<title>Icon inside Input Field - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<link href="css/formicon.css" rel="stylesheet">
</head>
<!-- Include CSS File Here -->
<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: formicon.css

Styling  form fields elements and placing icons inside it .

/* Below line is used to import font-family: Raleway from Google Fonts (optional)*/
@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:20px 25px;
background-color:#EEE;
color:#333;
border:2px solid #C2D6FF;
border-radius:5px;
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;
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;
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;
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;
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:#FF9980;
border-radius:5px;
border:none;
padding:10px 25px;
color:#FFF;
text-shadow:1px 1px 1px #949494;
margin-left:120px
}
input#submit:hover{
background-color:#80A24A
}

Pabbly Form Builder

Conclusion:

So, in this blog post we have learned to place icons inside the form fields elements. Hope you find it easy if have any issues do reply in the comments.

Have a look on some more related stuffs –

Related Posts:

How To Make Simple Responsive Form Using CSS/HTML
Attractive Form Button Design Irresistible To Avoid (With PSD)
12 Inspiring Form Designs You Will Love To See (With PSD)