Is it possible to place the label for input elements inside the span element generated by the cf7 shortcode?
I want to achieve this in order to make the label only visible when the input field is in focus.
To accomplish this, both the label and the input need to be within the same element so that I can target them with CSS like so:
input-ID:focus + .label-class
I attempted inserting the generated HTML markup into CF7 and moving the label inside (bypassing the shortcode), which achieves my desired outcome. However, it results in an issue where the "required" attribute stops functioning - all fields are required, yet the form can be submitted empty.
This is the HTML Markup Generated by 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>
This is the Desired Output:
<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>
I have tried using the above HTML code instead of the CF7 shortcode, but unfortunately, the "required" attribute no longer functions properly.