0

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?

Luuk Timmermans
  • 1
  • 2
  • can't you `float` your label right to get the same effect? – Aurovrata Aug 16 '23 at 09:20
  • What do you mean? The way the label is positioned is done by contact form 7. – Luuk Timmermans Aug 16 '23 at 15:28
  • I am assuming you are trying to place the label to the right of the span input on your screen, which you can achieve by [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float)'ing the label right. – Aurovrata Aug 19 '23 at 08:56

1 Answers1

0

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;
});
Luuk Timmermans
  • 1
  • 2