如何在 WordPress（使用 CF7）中的 Bootstrap 表单中包含 fontawesome 图标？-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

485987

文章

247267643

访问

+关注

分类

暂无分类

日期归档

暂无数据

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

发布于2023-05-29 21:19 阅读(842) 评论(0) 点赞(19) 收藏(2)

我正在尝试基于 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 样式，但看起来与图片中的完全不同。特别是我不知道如何设置我的字段的大小，更重要的是，如何在其中包含这些花哨的小图标？作为初学者，我将不胜感激任何有助于我解决问题的建议。

解决方案

您可以在 contact form 7 表单编辑器中使用 html。

将此代码替换为 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"]