Как включить в WordPress красивые иконки в формах Bootstrap (с CF7)? - PullRequest
Новая
       7

Как включить в WordPress красивые иконки в формах Bootstrap (с CF7)?

0 голосов
/ 07 января 2019

Я пытаюсь сделать тему WordPress на основе Bootstrap4. Все идет хорошо, но я заполняю свою контактную форму, которая выглядит следующим образом:

Contact form

Вот мой код: 

<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, но не выглядит так, как на картинке. Особенно я не знаю, как установить размер моих полей и, что более важно, как включить в них эти причудливые маленькие значки? Как новичок, я буду признателен за любые советы, которые помогут мне решить мою проблему.

1 Ответ

0 голосов
/ 07 января 2019

Вы можете использовать HTML в контактной форме 7 редактора форм.

Замените этот код в контактной форме 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"]
...