如何使Bootstrap 5浮动标签工作在联系形式7?

Question

我不能得到新的表单功能的工作，浮动标签(Bootstrap 5)在Contact form 7 (Wordpress)，问题是，它打破了当一个标签被添加到标签内，我认为，idk。

引导模板:

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

查看getbootstrap.com

联系人表单7编辑器示例:

<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>

Answer 1

尝试以下解决方案。

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;
});

Answer 2

首先，您必须从表单中删除<P>和<SPAN>。

define('WPCF7_AUTOP',false);

删除p，但是对于SPAN，您必须在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; });

现在，在CF7中，可以使用

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

浮动标签将工作作为方面，但我同意@Marko，使用这个hack，将不显示错误

卢卡

Answer 3

我将订阅Aculine的答案，这是真的，CF7验证丢失了，但我们可以像下面这样添加它。

<div class="row">
<div class="col col-12">
<div class="form-floating mb-4 wpcf7-form-control-wrap" data-name="form-email">
[email* form-email class:form-control placeholder "Email (required)"]
<label for="form-email">Email</label>
</div>
</div>
</div>

前面的代码是我在表单模板中添加的代码(wp-admin>接触表7>Form -floating"我添加了类"wpcf7-form-control-wrap"，与我们使用过滤器删除的垃圾邮件相同的类，以及数据名称，它等于输入名称。

Ajax验证再次工作:)