html - How to include fontawesome icons inside Bootstrap forms in WordPress (with CF7)?

Question

I'm trying to make WordPress theme based on Bootstrap4. Everthing is going fine, but I stock with my contact form, which looks like this:



Here is my code:

<form method="POST">
<div class="input-group input-group-lg mb-3 mt-5">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-user"></i>
        </span>
    </div>
    <input type="text" class="form-control" placeholder="Imię i nazwisko" name="full_name">
</div>

<div class="input-group input-group-lg mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-envelope-open"></i>
        </span>
    </div>
    <input type="text" class="form-control" placeholder="E-mail" name="email">
</div>

<div class="input-group input-group-lg mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-pencil-alt"></i>
        </span>
    </div>
    <textarea class="form-control" placeholder="Treść wiadomości" rows="5" name="message"></textarea>
</div>

<input type="submit" value="Wyślij wiadomość" class="btn btn-primary btn-block btn-lg">

The problem is, I don't know how to transform this into a WordPress theme. I added Form in Contact Form 7, like this:

[text* your-name class:form-control class:mb-3 class:mt-5 placeholder "Imię i nazwisko"]
[email* your-email class:form-control class:mb-3 placeholder "Adres e-mail"]
[textarea your-message class:form-control class:mb-3 placeholder "Wiadomość"]
[submit class:btn class:btn-primary class:btn-block class:btn-lg "Wyślij"]

and <?php echo do_shortcode( '[contact-form-7 id="5" title="Formularz kontaktowy"]' ); ?> in my index.html.

It works fine and even has some Bootstrap styles, but looks nothing like in the picture. Especially I don't know how to set the size of my fields and, more important, how to include this fancy little icons in them? As a beginner, I will appreciate any advice that would help me solve my issue.

标签： htmlwordpressbootstrap-4font-awesomecontact-form-7

Answer 1

You can use html in your contact form 7 form editor.

Replace this code in Contact form 7 => Form text area.

<div class="input-group input-group-lg mb-3 mt-5">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-user"></i>
        </span>
    </div>
    [text* your-name class:form-control class:mb-3 class:mt-5 placeholder "Imię i nazwisko"]
</div>

<div class="input-group input-group-lg mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-envelope-open"></i>
        </span>
    </div>
    [email* your-email class:form-control class:mb-3 placeholder "Adres e-mail"]
</div>

<div class="input-group input-group-lg mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">
            <i class="fas fa-pencil-alt"></i>
        </span>
    </div>
    [textarea your-message class:form-control class:mb-3 placeholder "Wiadomość"]
</div>

[submit class:btn class:btn-primary class:btn-block class:btn-lg "Wyślij"]