为WPForms多选下拉字段头部添加关闭按钮的技术需求

1. 给目标多选字段标记自定义类 #

打开WPForms表单编辑器，找到那三个需要修改的多选下拉字段，逐个进入「高级」选项卡，在「CSS类」输入框里填custom-multi-select-field，保存表单设置。

2. 添加按钮样式代码 #

进入WordPress后台的「外观」→「自定义」→「额外CSS」，粘贴以下代码来渲染关闭按钮的样式（可根据网站主题调整颜色、尺寸）：

/* 给字段标题留按钮空间 */
.custom-multi-select-field .wpforms-field-label {
    position: relative;
    padding-right: 40px;
}

/* 关闭按钮基础样式 */
.custom-multi-select-field .close-field-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: #888;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
}

/* 按钮 hover 效果 */
.custom-multi-select-field .close-field-btn:hover {
    background: #555;
}

/* 字段隐藏状态样式 */
.custom-multi-select-field.hidden {
    display: none;
}

3. 添加功能逻辑代码 #

用「Code Snippets」插件新建代码片段，或者在当前主题的functions.php文件末尾添加以下代码（注意替换页面标识）：

function custom_wpforms_multi_select_controls() {
    // 替换成你的目标页面slug或ID，比如页面URL是xxx.com/shine，slug就是shine
    if ( is_page('shine') ) {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有标记过的多选字段
        const targetFields = document.querySelectorAll('.custom-multi-select-field');
        
        targetFields.forEach((field, index) => {
            // 创建关闭按钮并插入到字段标题右侧
            const fieldLabel = field.querySelector('.wpforms-field-label');
            const closeBtn = document.createElement('button');
            closeBtn.className = 'close-field-btn';
            closeBtn.innerHTML = '&times;';
            fieldLabel.appendChild(closeBtn);
            
            // 点击关闭按钮的逻辑：隐藏当前字段，显示下一个
            closeBtn.addEventListener('click', function() {
                field.classList.add('hidden');
                if (index < targetFields.length - 1) {
                    targetFields[index + 1].classList.remove('hidden');
                }
            });
            
            // 选择选项后的逻辑：自动隐藏当前字段，显示下一个
            const selectBox = field.querySelector('select');
            selectBox.addEventListener('change', function() {
                if (this.selectedOptions.length > 0) {
                    field.classList.add('hidden');
                    if (index < targetFields.length - 1) {
                        targetFields[index + 1].classList.remove('hidden');
                    }
                }
            });
        });
        
        // 默认只显示第一个字段，隐藏后面两个
        for (let i = 1; i < targetFields.length; i++) {
            targetFields[i].classList.add('hidden');
        }
    });
    </script>
    <?php
    }
}
add_action('wp_footer', 'custom_wpforms_multi_select_controls');

4. 测试调整 #

保存所有修改后刷新页面，验证以下功能：

• 页面加载后只显示第一个多选字段
• 点击字段头部的关闭按钮，当前字段隐藏，下一个字段自动显示
• 选中任意选项后，当前字段自动隐藏，下一个字段显示
• 如果样式不符合需求，直接修改CSS里的颜色、尺寸参数即可

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