'Bootstrap Contact Form 7
Iam posting a screenshot of my results with the code and , a screenshot with what results iam trying to do . I tried to embed icons into placeholder but it seems it doesnt work .
<div class="row">
<div class="col-md-6 col-sm-12">
<label>Name</label>
<div class="form-field">
<i class="fa fa-user"></i>
[text* name placeholder "Enter your name"]
</div>
</div>
<div class="col-md-6 col-sm-12">
<label>E-Mail</label>
<div class="form-field">
<i class="fa fa-envelope-o"></i>
[email* email-78 placeholder "Enter your email"]
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12">
<label>Telephone <span style="color:#aaa">(Optional)</span></label>
<div class="form-field">
<i class="fa fa-phone"></i>
[text text-74 placeholder "Enter your phone"]
</div>
</div>
<div class="col-md-6 col-sm-12">
<label>Website <span style="color:#aaa">(Optional)</span></label>
<div class="form-field">
<i class="fa fa-globe"></i>
[text text-985 placeholder "Enter your website"]
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<label>Message</label>
<div class="form-field">
<i class="fa fa-pencil-square-o"></i>
[textarea textarea-197 placeholder "Enter your message"]
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
[submit class:btn class:btn-default "SEND YOUR MESSAGE"]
</div>
</div>
Thank You
Solution 1:[1]
Find below example and it may help you.
HTML
<input type="text" class="form-control iconDsp" placeholder=""/>
CSS in below code .iconDsp class which will link FontAwesome font-family to display icon
input.iconDsp{
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Iqbal Pasha |


