修复WordPress表单wpforms-selected选项无法提交至邮箱问题

1. 修复nextformspage.js的表单数据收集逻辑 #

过渡脚本大概率只收集了文本输入字段，遗漏了带wpforms-selected类的选项元素。找到脚本中负责收集表单数据的函数（比如getFormData()），替换为以下代码：

function getFormData(form) {
  const formData = new FormData();
  // 收集文本、邮箱输入及文本域
  form.querySelectorAll('input[type="text"], input[type="email"], textarea').forEach(field => {
    if (field.value) formData.append(field.name, field.value);
  });
  // 收集带wpforms-selected类的单选/复选框
  form.querySelectorAll('.wpforms-selected input[type="radio"], .wpforms-selected input[type="checkbox"]').forEach(input => {
    formData.append(input.name, input.value);
  });
  // 收集下拉选框的选中项
  form.querySelectorAll('select').forEach(select => {
    if (select.value) formData.append(select.name, select.value);
  });
  return formData;
}

如果原脚本用JSON格式收集数据，改用这段：

function getFormData(form) {
  const data = {};
  // 文本字段处理
  form.querySelectorAll('input[type="text"], input[type="email"], textarea').forEach(field => {
    if (field.value) data[field.name] = field.value;
  });
  // 单选/复选框处理
  form.querySelectorAll('.wpforms-selected input[type="radio"], .wpforms-selected input[type="checkbox"]').forEach(input => {
    if (input.type === 'checkbox') {
      data[input.name] = data[input.name] || [];
      data[input.name].push(input.value);
    } else {
      data[input.name] = input.value;
    }
  });
  // 下拉选框处理
  form.querySelectorAll('select').forEach(select => {
    if (select.value) data[select.name] = select.value;
  });
  return data;
}

2. 调整forms.js的提交参数处理 #

如果前端自动收集失效，在forms.js中添加手动补充选中项的逻辑：

document.querySelector('form.wpforms-form').addEventListener('submit', function(e) {
  const form = this;
  // 为未被自动收集的选中项添加隐藏输入
  form.querySelectorAll('.wpforms-selected input[type="radio"], .wpforms-selected input[type="checkbox"]').forEach(input => {
    if (!form.querySelector(`input[name="${input.name}"][value="${input.value}"]`)) {
      const hiddenInput = document.createElement('input');
      hiddenInput.type = 'hidden';
      hiddenInput.name = input.name;
      hiddenInput.value = input.value;
      form.appendChild(hiddenInput);
    }
  });
});

3. 通过functions.php确保后端接收并发送选中数据 #

如果前端数据已传递但后端未处理，添加WPForms钩子强制包含字段：

// 确保选中字段被加入提交数据
add_filter('wpforms_process_entry_data', 'include_selected_form_fields', 10, 2);
function include_selected_form_fields($entry_data, $form_data) {
  foreach ($_POST as $key => $value) {
    if (str_starts_with($key, 'wpforms[fields]')) {
      $field_id = str_replace(['wpforms[fields][', ']'], '', $key);
      if (!isset($entry_data[$field_id])) {
        $entry_data[$field_id] = $value;
      }
    }
  }
  return $entry_data;
}

// 确保邮件内容包含所有字段
add_filter('wpforms_email_message', 'add_selected_fields_to_email', 10, 4);
function add_selected_fields_to_email($message, $form_data, $entry, $email) {
  foreach ($form_data['fields'] as $field) {
    $field_id = $field['id'];
    $field_label = $field['label'];
    if (isset($entry[$field_id]) && strpos($message, $field_label) === false) {
      $field_value = is_array($entry[$field_id]) ? implode(', ', $entry[$field_id]) : $entry[$field_id];
      $message .= "\n\n{$field_label}: {$field_value}";
    }
  }
  return $message;
}

验证步骤 #

1. 清除浏览器缓存，刷新页面
2. 填写表单并选择带wpforms-selected类的选项，提交
3. 检查接收邮箱，确认选中项数据是否正常显示

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