Question 107149 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – How to make Bootstrap 5 Floating Label work in Contact Form 7?

I can’t get the new form feature to work, Floating labels (Bootstrap 5) in Contact Form 7 (WordPress), the issue is that it breaks when a tag is added inside the tag, I think, idk.

Bootstrap template:

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>

View in getbootstrap.com

Contact Form 7 example in editor:

<div class="form-floating mb-3"> [email emailExample id:floatingInput class:form-control]
  <label for="floatingInput">Email address</label>
</div>

Contact Form 7 example after:

<div class="form-floating my-3">
  <span class="wpcf7-form-control-wrap ignore">
    <input type="email" name="ignore" value="" size="40" id="floatingInput" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email form-control" aria-invalid="false">
  </span>
  <label for="floatingInput">Email address</label>
</div>
Tags:

2

Answers


  1. 0

    Try the following solution. Tweek class if needed

    add_filter('wpcf7_form_elements', function($content) {
    $content = preg_replace('/<(span).*?class="s*(?:.*s)?wpcf7-form-control-wrap(?:s[^"]+)?s*"[^>]*>(.*)</1>/i', '2', $content);
    $content = str_replace('<br />', '', $content);
    return $content;
});
    Login or Signup to reply.
  2. 0

    First of all you have to remove <P> and <SPAN> from form.

    CF7 give us:

    define('WPCF7_AUTOP',false);

    to remove P, but for SPAN, you have to add this line in functions.php

    add_filter('wpcf7_form_elements', function($content) {
$content = preg_replace('/<(span).*?class="s*(?:.*s)?wpcf7-form-control-wrap(?:s[^"]+)?s*"[^>]*>(.*)</1>/i', '2', $content);
return $content; });

    Now, in CF7, you can use

    <div class="form-floating mb-3">
[text* your-firstname class:form-control id:your-firstname placeholder "Nume*"]
<label for="your-firstname">Nume*</label>
</div>

    Floating labels will works as aspected but I agree with @Marko, using this hack, will not to display errors for missing fields.

    Luca

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search