Fetfurmoz
@Fetfurmoz
frontend

Как сделать плавающий placeholder contact form 7?

Здравствуйте, уже всю голову сломал, сайт residenciaespanola.ru в шапке кнопка всплывает форма, там плавающий placeholder, при нажатии и заполнении поля placeholder остается вверху, но если я сделаю focus по другому полю и уберу фокус, то placeholder опускается везде, делал через css но в contact form 7 поля оборачиваются дополнительно в span + span в котором выводится ошибка, поэтому к label через jquery добавляю class active для правки placeholdera.

Помогите, как сделать что бы placeholder опускался только у одного поля ? так как class удаляется у обоих полей, пробовал через valid не получается ((

ВИДЕО: g1t.ru/video/TdPhKfbiFF.mp4
  • Вопрос задан
  • 150 просмотров
Решения вопроса 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Решается с помощью :placeholder-shown

Ответ написан
AntonLitvinenko
@AntonLitvinenko
HTML coder
Обычно сначала я отключаю автоматическое создание параграфов вокруг полей
add_filter('wpcf7_autop_or_not', '__return_false');


Я добавляю некоторые элементы и классы в разметку
<div class="form-group">[text* contact-name id:contact-name class:form-control class:input-text]<label for="contact-name">Name</label></div>
<div class="form-group">[email* contact-email id:contact-email class:form-control class:input-text]<label for="contact-email">Email</label></div>
<div class="form-group">[textarea contact-message x2 id:contact-message class:form-control class:input-text]<label for="contact-message">Message</label></div>
<div class="form-submit">[submit class:gradient-btn class:btn-submit "Send Message"]</div>


Стили
.contact-form-wrapper .wpcf7 .form-group > label {
  position: absolute;
  top: 20px;
  left: 0;
  cursor: text;
  pointer-events: none;
  margin-bottom: 0;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.contact-form-wrapper .wpcf7 .form-group.active > label {
  top: -5px;
  left: 2px;
  font-size: 16px;
  cursor: default;
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы