Добавление иконки в поле в форме любого плагина

Всем привет! Это продолжение поста про добавление иконки в контактную форму.

Находим нужный нам селектор (класс)

Для того чтобы найти нужный класс, нам нужно нажать на элемент правой кнопкой мыши и просмотреть код элемента.

Я заранее задал класс "phone-field-icon" при создании поля с номером телефона и "name-field-icon" для поля с именем.

Ниже оставил два скриншота добавления классов для двух популярных плагинов (wpforms и contact form 7). В других контактных плагинах должно быть что-то похожее. Если нет, то не волнуйтесь — это необязательно.

// код для добавления класса cf7
<div class="name-field-icon">ШОРТКОД ПОЛЯ</div>

Теперь найдем этот класс на странице:

Прописываем css код

Для cf7 прописываем такой код:

.name-field-icon .wpcf7-form-control-wrap {
    position: relative;
}

.name-field-icon .wpcf7-form-control-wrap::after {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 50px;
    height: 100%;
    background: #eee url('http://test.local/wp-content/uploads/2022/10/159832.png') center center no-repeat;
    background-size: 25px;
}

.name-field-icon input {
    padding-left: 60px;
}

Отредактируйте тут width, url (адрес иконки), padding-lef и background-size под свой проект.

Для wpforms прописываем такой код:

.phone-field-icon {
    position: relative !important;
 }

.phone-field-icon::after {
    position: absolute;
    left: 1px;
    top: 36px;
    content: '';
    width: 36px;
    height: 36px;
    background: #eee url('http://test.local/wp-content/uploads/2022/10/159832.png') center center no-repeat;
    background-size: 21px;
}

У wpforms другая структура кода, поэтому код css довольно сильно изменился, но принципы остались такие же.

Пост канала @web_panda