WordPress中基于CF7下拉选项实现wppopupmaker弹窗动态内容展示

步骤1：配置CF7下拉字段 #

在Contact Form 7的表单编辑界面，给你的下拉选择字段添加唯一ID，示例代码如下：
[select service_type id:cf7_service_choice "咨询服务" "售后支持" "合作洽谈" "其他需求"]
记住你设置的字段ID和所有选项值，后续需要匹配使用。

步骤2：预设弹窗内的差异化内容 #

打开WP Popup Maker对应的弹窗编辑页：

1. 把所有选项对应的弹窗内容都添加到弹窗编辑区，给每个内容块添加统一类名popup-content-block，再给每个内容块加专属识别类名，比如咨询服务对应popup-service-consult、售后支持对应popup-service-support等。
2. 在弹窗的自定义CSS设置区添加如下样式，默认隐藏所有内容块：

.popup-content-block {
  display: none;
}
.popup-content-block.active {
  display: block;
}

步骤3：添加动态匹配JS代码 #

将以下代码添加到WordPress主题的自定义JS配置区，或者插入到页脚自定义HTML代码块中：

// 监听CF7表单提交成功事件，存储用户选择的下拉值
document.addEventListener('wpcf7mailsent', function(e) {
  const userChoice = document.getElementById('cf7_service_choice').value;
  localStorage.setItem('cf7_selected_service', userChoice);
}, false);

// 监听弹窗打开事件，匹配显示对应内容
jQuery(document).on('pumAfterOpen', function(e, popup) {
  const selectedVal = localStorage.getItem('cf7_selected_service');
  if (!selectedVal) return;
  // 先隐藏所有内容块
  jQuery('.popup-content-block').removeClass('active');
  // 按选择值匹配对应内容块
  switch(selectedVal) {
    case '咨询服务':
      jQuery('.popup-service-consult').addClass('active');
      break;
    case '售后支持':
      jQuery('.popup-service-support').addClass('active');
      break;
    case '合作洽谈':
      jQuery('.popup-service-cooperation').addClass('active');
      break;
    default:
      jQuery('.popup-service-other').addClass('active');
  }
  // 清除存储值，避免下次弹窗内容冲突
  localStorage.removeItem('cf7_selected_service');
});

注意：请将代码中的下拉字段ID、选项值、内容块类名替换为你站点的实际配置内容

步骤4：功能验证 #

• 先确认原有CF7提交触发弹窗的逻辑正常运行
• 依次选择不同下拉选项提交表单，检查弹窗内容是否和选项对应
• 若出现匹配失败，检查JS中case的取值是否和CF7下拉选项的文本完全一致，包括大小写、空格等字符

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