How can I remove the span wrapper in Contact Form 7, when a class exists?

Question

I'm trying to get the label element into the 'wpcf7-form-control-wrap' span, but I only want this to be done when the class 'floating' is added to a parent div.

I'm using the following solution: https://stackoverflow.com/a/72207202/16605585, but when using this, the 'wpcf7-form-control-wrap' span gets affected for every field.

The end result should look something like this, when adding the 'floating' class:

<div class="form-group floating">
  <span class="wpcf7-form-control-wrap" data-name="e-mailadres">
    <input size="40" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email" id="e-mailadres" autocomplete="email" aria-required="true" aria-invalid="false" placeholder="E-mailadres" value="" type="email" name="e-mailadres">
    <label for="e-mailadres">E-mailadres</label>
  </span>
</div>

The result without adding the 'floating' class should be:

<div class="form-group">
  <label for="e-mailadres">E-mailadres</label>
  <span class="wpcf7-form-control-wrap" data-name="e-mailadres">
    <input size="40" class="wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email" id="e-mailadres" autocomplete="email" aria-required="true" aria-invalid="false" placeholder="E-mailadres" value="" type="email" name="e-mailadres">
  </span>
</div>

Any ideas?

Answer 1

After digging some deeper, I found the solution:

add_filter('wpcf7_form_elements', function ($content) {
  $content = preg_replace('/<div class="(.*?\bfloating\b.*?)">\s+<span.*?>(.*?)<\/span>\s+<label.*?for="(.*?)">(.*?)<\/label>\s*<\/div>/s', '<div class="$1"><span class="wpcf7-form-control-wrap" data-name="$3">$2<label for="$3">$4</label></span></div>', $content);
  return $content;
});