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

Question

[Денис]

Здравствуйте, уже всю голову сломал, сайт 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

Answer 1

[Ankhena]

Решается с помощью :placeholder-shown

Comments

[Денис]

В том то и проблема не получается сделать

input:focus+label,
    input:not(:placeholder-shown)+label,
    textarea:focus+label,
    textarea:not(:placeholder-shown)+label {
      top: 10px;
    }

Потому что Contact form + 7 оборачивает input в span и после inputa еще стоит один span где выводится ошибка

[Ankhena]

Денис, на спан для ошибок-то наплевать, а вот оберточный это плохо. И, да, действительно, он поднимает label js'ом.
Напрашивается печальный вывод, что и решать придется js'ом, проверяя заполненность.

Answer 2

[Антон Литвиненко]

Обычно сначала я отключаю автоматическое создание параграфов вокруг полей

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;
}

Comments

[Денис]

За решение спасибо, видел такое, но, не будут ли появляется ошибки в будущем из за удаления параграфов у полей формы ? хотелось бы работать без костылей

[Денис]

Попробовал Ваше решение в function.php оно не работает, вот нашел в документации https://contactform7.com/controlling-behavior-by-s...

[Антон Литвиненко]

Денис, мое решение взято с рабочего проекта
https://drive.google.com/file/d/1yOXGv9kH42ks9BBaH...

[Денис]

Антон Литвиненко, так поля input в спам завернуты g1t.ru/video/chrome_YXugJspHmN.png

[Денис]

а можно ссылку на проект реальный ? где реализовано данный функционал ?

[Антон Литвиненко]

Денис, проект ещё в разработке, хз когда появится публичная ссылка. В спан заворачивает cf7. Берите за основу, не нужно прям символ в символ повторять