Как разместить метку внутри элемента span wpcf7-form-control-wrap

Question

Я хотел бы поместить метку для элементов ввода в элемент span, сгенерированный коротким кодом cf7 - это возможно?

Причина, по которой я хочу это сделать, заключается в том, что я пытаюсь создать только меткупоявляются, когда поле ввода имеет: focus

Чтобы сделать это, метка и вход должны быть внутри одного элемента, поэтому я могу выбрать следующий селектор css:

input-ID: focus + .label-class

Я попытался просто вставить сгенерированную разметку HTML в CF7 и переместить метку внутрь (вместо использования шорткода), что позволяет получить то, что я хочу, однако это вызывает странную проблему, когдаАтрибут «required» больше не работает - все поля обязательны для заполнения, но теперь форму можно отправить пустым

Вот что генерирует CF7:

<span class="wpcf7-form-control-wrap your-name-wrap">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name-1" aria-required="true" aria-invalid="false" placeholder="Name"></span>
<label for="your-name" class="label-helper">Name</label>

Это то, что я хочу:

<span class="wpcf7-form-control-wrap your-name-wrap">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name-1" aria-required="true" aria-invalid="false" placeholder="Name">
<label for="your-name" class="label-helper">Name</label></span>

Я пытался реализовать HTML выше, а не использовать шорткод CF7, но требуется больше не работает

Answer 1

Пожалуйста, проверьте, может это поможет. Я думаю, что вы использовали в каждой функции или через цикл ..

var getLabel = $(".wpcf7-form-control-wrap").next("label").detach();
        $(".wpcf7-form-control-wrap").append(getLabel);

.wpcf7-form-control:focus + .label-helper{color: red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="wpcf7-form-control-wrap your-name-wrap">
<input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="your-name-1" aria-required="true" aria-invalid="false" placeholder="Name"></span>
<label for="your-name" class="label-helper">Name</label>