本教程旨在解决如何通过点击定价表中的按钮，自动选择 Contact Form 7 表单中对应下拉菜单选项的问题。通过使用会话（Session）存储用户在定价页面选择的套餐信息，并在 Contact Form 7 表单页面读取会话数据，从而实现下拉菜单的自动选择。教程将提供详细的代码示例，帮助开发者实现这一功能。
实现步骤
以下步骤将详细介绍如何通过按钮点击联动 Contact Form 7 下拉菜单选项。
1. 定价页面设置
首先，需要在定价页面为每个套餐按钮添加 data-value 属性，用于存储套餐名称。同时，将按钮包裹在一个 form 表单内，通过 POST 方法提交到 session.php 文件。
<form action="session.php" method="post">
<button data-value="Starter Paket" class="favorite styled" type="submit" name="value" value="Starter Paket">
Starter
</button>
<button data-value="Business Paket" class="favorite styled" type="submit" name="value" value="Business Paket">
Business
</button>
<button data-value="Professional Paket" class="favorite styled" type="submit" name="value" value="Professional Paket">
Professional
</button>
</form>注意: name="value" 和 value 属性至关重要，确保 POST 请求能够正确传递套餐名称。
2. 创建 session.php 文件
创建 session.php 文件，用于接收 POST 请求中的套餐名称，并将其存储到会话（Session）中。
<?php
session_start();
if (isset($_POST['value'])) {
$value = $_POST['value'];
$_SESSION['value'] = $value;
// 可以选择重定向回 Contact Form 7 页面
header("Location: contact.php");
exit();
} else {
// 处理没有接收到 value 的情况，例如显示错误消息
echo "未选择套餐";
}
?>注意: 确保在 session.php 文件的开头调用 session_start() 函数，以启动会话。同时，建议在成功设置 session 后重定向到 contact form 页面，提升用户体验。
3. 修改 Contact Form 7 表单页面 (contact.php)
在 Contact Form 7 表单页面（例如 contact.php），读取会话（Session）中存储的套餐名称，并将其应用到下拉菜单的默认选中项。由于直接修改 Contact Form 7 的表单元素比较复杂，建议通过 JavaScript 来实现。
首先，确保 Contact Form 7 的下拉菜单拥有一个唯一的 ID，例如 menu-892。然后，在 contact.php 页面的 <head> 标签中添加以下 JavaScript 代码：
<script>
document.addEventListener('DOMContentLoaded', function() {
<?php
session_start();
if (isset($_SESSION['value'])) {
$selected_value = $_SESSION['value'];
echo "
var selectElement = document.getElementById('menu-892');
if (selectElement) {
for (var i = 0; i < selectElement.options.length; i++) {
if (selectElement.options[i].value === '" . $selected_value . "') {
selectElement.selectedIndex = i;
break;
}
}
}
";
// 清除 session，防止刷新页面时再次选中
unset($_SESSION['value']);
}
?>
});
</script>代码解释:
- document.addEventListener('DOMContentLoaded', function() { ... });：确保在页面加载完成后执行 JavaScript 代码。
- session_start();：启动会话，以便读取会话数据。
- if (isset($_SESSION['value'])) { ... }：检查会话中是否存在 value 变量，即用户是否选择了套餐。
- $selected_value = $_SESSION['value'];：获取会话中存储的套餐名称。
- var selectElement = document.getElementById('menu-892');：获取 Contact Form 7 下拉菜单的 DOM 元素。 注意：需要将 menu-892 替换成你实际的下拉菜单 ID。 可以在 Contact Form 7 管理界面查看表单代码，找到下拉菜单的 [select] 标签，从中获取 ID。 例如：[select* menu-892 "Option 1" "Option 2"]，这里的 menu-892 就是下拉菜单的 ID。
- 循环遍历下拉菜单的选项，找到与会话中存储的套餐名称匹配的选项，并将其设置为选中状态。
- unset($_SESSION['value']);：清除会话数据，防止用户刷新页面时再次选中。
注意: 确保 Contact Form 7 表单的下拉菜单选项的 value 值与定价页面按钮的 data-value 值完全一致。
4. Contact Form 7 表单代码
Contact Form 7 表单代码示例：
[text your-company placeholder "Firma"] [text* your-name placeholder "Name*"] [email* your-email placeholder "Email-Adresse*"] [select* menu-892 id:menu-892 "Allgemeine Anfrage" "Starter Paket" "Business Paket" "Professional Paket"] [textarea your-message placeholder "Nachricht" ] [submit "Senden"]
注意: 需要在 [select] 标签中添加 id:menu-892，以便 JavaScript 代码能够找到下拉菜单元素。 确保下拉菜单选项的 value 值（例如 "Starter Paket", "Business Paket", "Professional Paket"）与定价页面按钮的 data-value 值完全一致。
总结
通过以上步骤，就可以实现通过点击定价表中的按钮，自动选择 Contact Form 7 表单中对应下拉菜单选项的功能。核心思路是利用会话（Session）存储用户选择的套餐信息，并在 Contact Form 7 表单页面读取会话数据，然后通过 JavaScript 代码动态设置下拉菜单的选中项。
注意事项:
- 确保服务器支持 PHP 会话（Session）。
- 检查所有代码中的变量名称和 ID 是否正确。
- 确保定价页面按钮的 data-value 值与 Contact Form 7 表单下拉菜单选项的 value 值完全一致。
- 在生产环境中，应该对用户输入进行验证和过滤，以防止安全漏洞。
- 可以根据实际需求，对代码进行适当的修改和优化。
这个方法提供了一种相对简单的方式来实现按钮和 Contact Form 7 表单之间的联动。 如果需要更复杂的功能，例如动态更新表单内容，可能需要使用 Contact Form 7 的 JavaScript API 或者其他更高级的技术。
