Как сделать плавающий placeholder contact form 7?
Решается с помощью :placeholder-shown

snippet
Обычно сначала я отключаю автоматическое создание параграфов вокруг полей
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;
}