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

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 主题。我在 Contact Form 7 中添加了 Form，如下所示：

[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

您可以在 contact form 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"]

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

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

html

wordpress

contact-form-7

font-awesome

bootstrap-4