Skip to main content

Плавающий плейсхолдер в Contact Form 7 для WordPress

Эффект «плавающего плейсхолдера» становится все популярнее. Если в большинстве современных конструкторов он доступен «из коробки», то в Contact Form 7, одном из самых популярных плагинов для форм обратной связи на WordPress, этот эффект нужно настроить самостоятельно.

Сейчас я покажу, как это сделать.

Код для реализации

Добавьте следующий CSS в ваш файл стилей или в раздел «Дополнительные стили» вашей темы: 

.wpcf7-form-control {
    padding: 1rem;
}

.wpcf7-form-control::placeholder {
    color: #111; /* цвет плейсхолдера */
    transition: all 0.2s;
}

.wpcf7-form-control:focus::placeholder {
    color: #999;
    transform: translateY(-20px);
    font-size: 12px;
}

.wpcf7-form-control:focus + label,
.wpcf7-form-control:not(:placeholder-shown) + label {
    transform: translateY(-20px);
    font-size: 12px;
}

Этот код:

  • Добавляет базовый отступ для поля ввода.
  • Изменяет цвет и положение стандартного плейсхолдера при взаимодействии.
  • Поднимает текст метки (label) вверх, если поле активно или заполнено.

Теперь ваша форма в Contact Form 7 получила современный эффект плавающего плейсхолдера!

Если вы хотите разработать или улучшить сайт на WordPress, пишите — помогу сделать его удобным и стильным!