本文介绍一种无需后端会话的轻量级方案，利用 jquery 在前端直接将定价表按钮的点击事件映射到 contact form 7 的下拉字段，实现“点击 starter 按钮 → 自动选中‘starter paket’”的无缝交互。
本文介绍一种无需后端会话的轻量级方案，利用 jquery 在前端直接将定价表按钮的点击事件映射到 contact form 7 的下拉字段，实现“点击 starter 按钮 → 自动选中‘starter paket’”的无缝交互。
Contact Form 7 默认不支持跨元素联动，但其生成的表单 DOM 结构是标准的 HTML，因此可通过前端 JavaScript（推荐 jQuery）轻松实现按钮驱动下拉选择。核心思路是：为每个定价按钮添加 data-value 属性，绑定点击事件，动态设置对应 <select></select> 元素的 value 并触发 change 事件，确保 CF7 表单验证和提交逻辑正常工作。
✅ 推荐实现步骤（纯前端、零服务端依赖）：
-
确保 Contact Form 7 表单已正确渲染
你的原始 CF7 短代码会生成类似如下 HTML（关键部分）：<select name="menu-892" class="wpcf7-form-control wpcf7-select" aria-required="true" aria-invalid="false"><option value="Allgemeine Anfrage">Allgemeine Anfrage</option> <option value="Starter Paket">Starter Paket</option> <option value="Business Paket">Business Paket</option> <option value="Professional Paket">Professional Paket</option></select>
-
为定价按钮添加统一类名与数据属性（如你已做的）：
<button type="button" data-value="Starter Paket" class="cf7-pricing-btn">Starter</button> <button type="button" data-value="Business Paket" class="cf7-pricing-btn">Business</button> <button type="button" data-value="Professional Paket" class="cf7-pricing-btn">Pro</button>
-
在页面底部或主题 JS 文件中加入以下 jQuery 脚本（需确保 jQuery 已加载）：
document.addEventListener('DOMContentLoaded', function() { jQuery('.cf7-pricing-btn').on('click', function() { const targetValue = jQuery(this).data('value'); // 精确匹配 CF7 下拉字段（使用 name 属性定位） const $select = jQuery('select[name="menu-892"]'); if ($select.length) { $select.val(targetValue).trigger('change'); // .trigger('change') 至关重要！ // 可选：滚动至表单顶部，提升用户体验 jQuery('html, body').animate({ scrollTop: $select.closest('form').offset().top - 100 }, 300); } }); });
⚠️ 关键注意事项：
-
trigger('change')不可省略——CF7 依赖原生change事件来更新内部状态、启用提交按钮及执行必填校验；仅设val()不会触发验证逻辑。 - 若页面含多个 CF7 表单，请为下拉字段添加唯一 ID（如
[select* menu-892 id:pricing-plan]），并改用jQuery('#pricing-plan')定位，避免误操作。 - 建议将脚本置于
wp_enqueue_script中，而非内联<script></script>，以兼容 WordPress 脚本优化机制。
? 进阶提示：
若需持久化选择（如用户跳转后仍保留），可结合 localStorage 存储选中值，并在页面加载时回填：
// 页面加载时恢复上次选择
const savedValue = localStorage.getItem('cf7_pricing_selection');
if (savedValue && jQuery('select[name="menu-892"]').length) {
jQuery('select[name="menu-892"]').val(savedValue).trigger('change');
}
// 点击时同步保存
jQuery('.cf7-pricing-btn').on('click', function() {
localStorage.setItem('cf7_pricing_selection', jQuery(this).data('value'));
// ...后续逻辑同上
});
该方案简洁、可靠、无服务器压力，完美适配现代 WordPress 站点，且兼容 CF7 的所有扩展功能（如邮件模板变量 %menu-892% 将正确输出所选值）。
