如何在WordPress的Bootstrap表单中包含Fontawesome图标（使用CF7）？

Question

我正在尝试基于Bootstrap4创建WordPress主题。一切都很好，但是我准备了联系表格，看起来像这样：



这是我的代码：

<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">

问题是，我不知道如何将其转换为WordPress主题。我在联系表7中添加了表单，如下所示：

[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"]

和<?php echo do_shortcode( '[contact-form-7 id="5" title="Formularz kontaktowy"]' ); ?>在我的index.html中。

它可以正常工作，甚至具有一些Bootstrap样式，但看起来与图片中的内容完全不同。特别是我不知道如何设置字段的大小，更重要的是，如何将这些精美的小图标包含在其中？ 作为初学者，我将不胜感激任何可以帮助我解决问题的建议。

Answer 1

您可以在联系表单7表单编辑器中使用html。

在联系表单7 => 表单文本区域中替换此代码。

<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"]