如何使Bootstrap 5浮动标签在Contact Form 7中工作？

dxpyg8gm 于 2023-01-03 发布在 Bootstrap

关注(0)|答案(2)|浏览(324)

我不能让新的表单功能工作，浮动标签（Bootstrap 5）在联系人表单7（WordPress），问题是，它打破了当一个标签被添加到标签内，我认为，idk。
Bootstrap 模板：

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

View in getbootstrap.com
编辑器中的Contact Form 7示例：

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

联系表格7示例：

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

twitter-bootstrap

来源：https://stackoverflow.com/questions/69311102/how-to-make-bootstrap-5-floating-label-work-in-contact-form-7

2条答案

按热度按时间

ztigrdn81#

请尝试以下解决方案。如果需要，请使用Twek类

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

赞(0）回复(0）举报 2023-01-03

uoifb46i2#

首先，您必须从表单中删除<P>和<SPAN>。
CF 7为我们提供：

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

现在，在CF 7中，您可以使用

<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，使用这个黑客，将不会显示错误丢失的字段。
卢卡

赞(0）回复(0）举报 2023-01-03

我来回答

如何使Bootstrap 5浮动标签在Contact Form 7中工作？

2条答案

相关问题

热门标签

最新问答