Bootstrap Contact Form 7

Question

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>

My results are :

I want to accomplish this :

Thank You

http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box — Ijas, Apr 05 '16 at 10:48

score 0 · Answer 1 · answered Apr 05 '16 at 11:17

0

Find below example and it may help you.

HTML

<input type="text" class="form-control iconDsp" placeholder="&#xf007;"/>

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;
}

answered Apr 05 '16 at 11:17

Iqbal Pasha

1,318
1
8
12

I want to combine it with my Contact Form 7 plugin – Christodoulou Andreas Apr 05 '16 at 12:20
can you provide fiddle what you have created so that i can help you. – Iqbal Pasha Apr 05 '16 at 12:26
What do you mean fiddle ? My code is on the topic .. ? can you explain me what do you mean please ? – Christodoulou Andreas Apr 05 '16 at 13:06
as you have posted image of design post the same html code, css and its related script – Iqbal Pasha Apr 05 '16 at 13:10

Bootstrap Contact Form 7

1 Answers1