Contact Form 7能否点击定价表按钮自动选中下拉框对应值？

现有代码适配说明 #

你当前的Starter套餐按钮标签缺失开头的<，先补全标签，同时给Business、Pro两个档位的按钮也加上相同规则的data-value属性，属性值必须和CF7下拉菜单里的选项文本完全一致，参考代码：

<!-- Starter套餐按钮 -->
<button data-value="Starter Paket" class="favorite styled" type="button">
   Starter
</button>

<!-- Business套餐按钮 -->
<button data-value="Business Paket" class="favorite styled" type="button">
   Business
</button>

<!-- Professional套餐按钮 -->
<button data-value="Professional Paket" class="favorite styled" type="button">
   Pro
</button>

你现有的CF7表单代码不需要做任何修改，下拉字段的选项值已经和三个套餐做了一一对应，直接用就行。

添加交互脚本 #

把下面的JS代码添加到站点的自定义脚本位置（WordPress后台外观自定义的额外JS栏、代码片段插件的JS添加模块都可以），就能实现点击按钮自动选中对应下拉选项的效果，还附带了平滑滚动到表单、选中后短暂高亮下拉框的体验优化：

document.addEventListener('DOMContentLoaded', () => {
  const planButtons = document.querySelectorAll('.styled.favorite[data-value]')
  planButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      const selectedPlan = btn.dataset.value
      const planDropdown = document.querySelector('select[name="menu-892"]')
      if (!planDropdown) return
      // 赋值选中对应套餐
      planDropdown.value = selectedPlan
      // 平滑滚动到表单位置
      planDropdown.closest('.wpcf7-form').scrollIntoView({
        behavior: 'smooth',
        block: 'center'
      })
      // 高亮提示选中成功，2秒后取消高亮
      planDropdown.style.boxShadow = '0 0 0 2px #2563eb'
      setTimeout(() => {
        planDropdown.style.boxShadow = 'none'
      }, 2000)
    })
  })
})

避坑提示 #

• 按钮上data-value的内容必须和CF7下拉里的选项文字完全一样，空格、大小写、特殊符号都不能差，不然选不中
• 要是你之后改了CF7下拉字段的name（当前是menu-892），记得同步改JS里select[name="menu-892"]对应的name值，不然脚本找不到下拉框
• 如果同一个页面放了好几个CF7表单，最好给这个选套餐的表单加个专属class，把脚本的查找范围限定在这个表单里，避免误改其他表单的下拉值

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