Как добавить иконки в WordPress формы обратной связи

Формы обратной связи — важный элемент любого сайта на WordPress. Они помогают пользователям быстро связаться с вами, а иконки в них делают интерфейс более понятным и привлекательным. В этой статье разберем, как добавить иконки в формы обратной связи WordPress с помощью популярных плагинов и собственного кода.

Зачем добавлять иконки в формы обратной связи WordPress

Иконки в формах обратной связи помогают визуально обозначить поля: email, телефон, имя, сообщение и другие. Это улучшает восприятие и повышает удобство использования. Кроме того, иконки делают дизайн формы более современным и аккуратным. Особенно актуально для сайтов с большим трафиком и разными типами пользователей.

Добавление иконок помогает:

• Уменьшить ошибки заполнения формы;
• Повысить конверсию за счет улучшения UX;
• Сделать форму стильной и соответствующей дизайну сайта.

Добавление иконок с помощью популярных плагинов

1. Contact Form 7 и плагин Contact Form 7 Skins

Contact Form 7 — самый популярный плагин для создания форм обратной связи. Чтобы добавить иконки, можно использовать расширение Contact Form 7 Skins, которое позволяет легко стилизовать поля, включая добавление иконок.

Как добавить иконки:

1. Установите и активируйте Contact Form 7 и Contact Form 7 Skins.
2. Перейдите в раздел Контакты → Skins и выберите шаблон с иконками.
3. Отредактируйте форму, добавив нужные поля с иконками.

Плюсы: не требует написания кода, быстрое решение для новичков.

2. WPForms и иконки в полях

WPForms — удобный конструктор форм с drag&drop. Чтобы добавить иконки, можно использовать кастомные CSS-классы, либо установить дополнения для стилизации.

Пример CSS для добавления иконок FontAwesome к полям:

.wpforms-field-name input { padding-left: 30px; background: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/svgs/solid/user.svg') no-repeat 5px center; background-size: 20px 20px; }

Этот способ требует базовых знаний CSS, но позволяет гибко настраивать вид формы.

Добавление иконок в формы обратной связи через код

1. Использование FontAwesome и кастомного PHP-шорткода

Если вы хотите добавить иконки в форму без плагинов, можно создать шорткод, который выводит форму с иконками на основе FontAwesome.

Пример функции для wpicons.ru:

function wpicons_custom_contact_form() {
    ob_start();
    ?>
    <form action="" method="post" class="wpicons-contact-form">
        <label><i class="fas fa-user"></i> Имя<br>
            <input type="text" name="wpicons_name" required>
        </label><br>
        <label><i class="fas fa-envelope"></i> Email<br>
            <input type="email" name="wpicons_email" required>
        </label><br>
        <label><i class="fas fa-comment"></i> Сообщение<br>
            <textarea name="wpicons_message" required></textarea>
        </label><br>
        <button type="submit">Отправить</button>
    </form>
    <style>
        .wpicons-contact-form label {
            display: block;
            margin-bottom: 15px;
            font-size: 14px;
        }
        .wpicons-contact-form i {
            margin-right: 8px;
            color: #555;
        }
        .wpicons-contact-form input, .wpicons-contact-form textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .wpicons-contact-form button {
            background-color: #0073aa;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }
        .wpicons-contact-form button:hover {
            background-color: #005177;
        }
    </style>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <?php
    return ob_get_clean();
}
add_shortcode('wpicons_contact', 'wpicons_custom_contact_form');

Этот шорткод можно вставить в любую страницу или запись: [wpicons_contact]. Он выводит форму с иконками FontAwesome рядом с каждым полем.

2. Добавление иконок в поля Contact Form 7 через фильтры и CSS

Для тех, кто использует Contact Form 7, есть способ добавить иконки с помощью кастомного CSS и небольшой доработки HTML-шаблона формы.

Пример HTML формы CF7 с классами для иконок:

[text* your-name class:wpicons-name placeholder "Ваше имя"]
[email* your-email class:wpicons-email placeholder "Ваш Email"]
[textarea your-message class:wpicons-message placeholder "Ваше сообщение"]
[submit "Отправить"]

CSS для добавления иконок через background-image:

.wpicons-name {
    background: url('https://example.com/icons/user.svg') no-repeat 10px center;
    padding-left: 40px;
}
.wpicons-email {
    background: url('https://example.com/icons/email.svg') no-repeat 10px center;
    padding-left: 40px;
}
.wpicons-message {
    background: url('https://example.com/icons/message.svg') no-repeat 10px 10px;
    padding-left: 40px;
}

Просто замените ссылки на иконки на свои, подходящие вашему дизайну.

Оптимизация иконок в формах обратной связи

Чтобы иконки не замедляли загрузку страницы, используйте:

• SVG-формат — легкий и масштабируемый;
• Спрятанные спрайты или шрифты иконок (FontAwesome, IcoMoon);
• Ленивую загрузку, если форма подгружается динамически;
• Минимальный набор стилей без лишних библиотек.

Например, можно использовать плагин Clearfy Pro для оптимизации загрузки ресурсов и улучшения производительности сайта с формами.

Вывод

Добавление иконок в формы обратной связи WordPress — практическая задача, которая улучшает UX и визуальную составляющую сайта. Выбор способа зависит от ваших навыков и требований: от плагинов с готовыми решениями до кастомного кода с шорткодами и CSS.

Если вы хотите быстро и удобно добавить иконки, попробуйте WPForms или Contact Form 7 с расширениями. Для разработчиков подойдет собственный шорткод с FontAwesome.