通过按钮点击联动 Contact Form 7 下拉菜单选项-html教程-PHP中文网

通过按钮点击联动 Contact Form 7 下拉菜单选项

DDD

发布： 2025-10-03 17:44:25

原创

963人浏览过

通过按钮点击联动 contact form 7 下拉菜单选项

本教程旨在解决如何通过点击定价表中的按钮，自动选择 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 代码：

造点AI

夸克 · 造点AI

325

查看详情

<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 值完全一致。