如何在CF7中自定义带分类/分组的下拉列表？

1. 使用CF7扩展插件（推荐，无需手动编码） #

• 可以用 Contact Form 7 Dynamic Text Extension 或者 CF7 Smart Grid-layout Extension 这类官方生态内的插件，它们原生支持在下拉菜单中添加分组（optgroup）功能。
  • 以CF7 Smart Grid-layout Extension为例：安装激活后，在CF7表单编辑器添加下拉字段时，直接就能看到分组设置选项，输入分组名称和对应选项即可生成带分类的下拉列表，全程可视化操作。
• 还有 Select2 for Contact Form 7 插件，不仅能实现分组下拉，还能给下拉框加上搜索、美化样式的功能，配置步骤简单，适合需要更交互性的场景。

2. 手动插入原生HTML代码（无需插件，快速实现） #

CF7允许直接插入自定义HTML，因此可以手动编写带<optgroup>标签的下拉代码，替换默认的下拉字段：

<label> 选择分类项目
  <select name="grouped-select" required>
    <optgroup label="分类1">
      <option value="item1">项目1</option>
      <option value="item2">项目2</option>
    </optgroup>
    <optgroup label="分类2">
      <option value="item3">项目3</option>
      <option value="item4">项目4</option>
    </optgroup>
  </select>
</label>

把这段代码直接粘贴到CF7的表单编辑框里即可，后台接收数据时，用[grouped-select]标签就能获取用户选择的值。

关于CSS的作用 #

CSS无法实现下拉列表的分组结构，它只能用来美化分组下拉的样式，比如调整分组标签的字体、颜色，选项的间距等。例如：

optgroup {
  font-weight: bold;
  color: #2c3e50;
}
option {
  color: #34495e;
  padding: 4px 0;
}

这段CSS可以让分组标题更醒目，选项样式更清晰。

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