如何让Bootstrap 5浮动标签（Floating Label）在Contact Form 7中正常生效？

问题根源 #

Contact Form 7 渲染表单时会自动在所有输入控件外包裹一层wpcf7-form-control-wrap类的span标签，破坏了Bootstrap 5浮动标签要求的「input与label同级相邻、input在前」的DOM结构，导致原有样式逻辑失效。

解决方案 #

方案1：纯CSS适配（推荐，无需修改功能代码） #

直接在主题自定义CSS、主题style.css或自定义代码插件中加入以下样式即可兼容，不影响CF7原有错误提示等功能：

/* 适配CF7嵌套span的输入框宽度 */
.form-floating > .wpcf7-form-control-wrap {
  width: 100%;
}
/* 适配输入框基础内边距 */
.form-floating > .wpcf7-form-control-wrap > .form-control {
  height: calc(3.5rem + 2px);
  padding: 1rem 0.75rem;
  line-height: 1.25;
}
/* 隐藏默认placeholder文字，用于触发浮动判断 */
.form-floating > .wpcf7-form-control-wrap > .form-control::placeholder {
  color: transparent;
}
/* 输入框聚焦、有输入内容时的内边距调整 */
.form-floating > .wpcf7-form-control-wrap > .form-control:focus,
.form-floating > .wpcf7-form-control-wrap > .form-control:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
/* 适配label浮动动画和位移逻辑 */
.form-floating > .wpcf7-form-control-wrap + label {
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
.form-floating > .wpcf7-form-control-wrap:has(> .form-control:focus) + label,
.form-floating > .wpcf7-form-control-wrap:has(> .form-control:not(:placeholder-shown)) + label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

方案2：移除CF7自动包裹的span标签（适合需要完全对齐Bootstrap原生结构的场景） #

将以下代码添加到WordPress主题的functions.php文件中，即可去掉所有表单控件外层的多余span：

add_filter( 'wpcf7_form_elements', function( $elements ) {
    // 匹配并移除CF7自动添加的表单控件外层span
    $elements = preg_replace( '/<span class="wpcf7-form-control-wrap.*?">(.*?)<\/span>/is', '$1', $elements );
    return $elements;
} );

注意：该方法会移除CF7错误提示的默认挂载容器，若需保留表单验证错误提示，需要额外自定义错误提示的样式和挂载逻辑。

注意事项 #

• 所有输入字段必须配置placeholder属性，哪怕值为空，Bootstrap浮动标签依赖placeholder的显示状态判断是否触发浮动效果，CF7短代码示例：[email emailExample id:floatingInput class:form-control placeholder "请输入邮箱地址"]
• 确保输入字段的id属性和对应label的for属性完全一致，避免点击label无法聚焦输入框的问题。

内容的提问来源于stack exchange，提问作者Meregildo