如何获取用户地理位置并将其传入Contact Form 7管理员通知邮件

方案1：直接使用CF7隐藏字段（更推荐，无需处理Cookie） #

该方案逻辑简单、出错概率低，操作步骤如下：

• 第一步：在CF7表单编辑界面，添加两个隐藏字段，代码如下：

[hidden user_latitude id:user_latitude]
[hidden user_longitude id:user_longitude]

• 第二步：修改你现有的JS代码，将获取到的经纬度赋值给这两个隐藏字段，而非打印在页面上，修改后的代码如下：

// 可根据需求选择页面加载完成后触发定位，或绑定到按钮点击、表单提交前触发
document.addEventListener('DOMContentLoaded', function() {
    getLocation();
});

function getLocation() {
  const latField = document.getElementById('user_latitude');
  const lngField = document.getElementById('user_longitude');
  const tipDom = document.getElementById('demo');
  
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else { 
    tipDom.innerHTML = "当前浏览器不支持定位功能";
  }

  function showPosition(position) {
    // 给CF7隐藏字段赋值
    latField.value = position.coords.latitude;
    lngField.value = position.coords.longitude;
    // 可选：给用户展示定位成功提示
    tipDom.innerHTML = "定位成功";
  }

  // 处理定位异常场景
  function showError(error) {
    switch(error.code) {
      case error.PERMISSION_DENIED:
        tipDom.innerHTML = "用户拒绝了定位请求"
        break;
      case error.POSITION_UNAVAILABLE:
        tipDom.innerHTML = "位置信息不可用"
        break;
      case error.TIMEOUT:
        tipDom.innerHTML = "定位请求超时"
        break;
      case error.UNKNOWN_ERROR:
        tipDom.innerHTML = "定位发生未知错误"
        break;
    }
  }
}

• 第三步：在CF7的邮件模板对应位置插入[user_latitude]和[user_longitude]标签，表单提交后两个字段的值就会随邮件发送给管理员。

方案2：通过Cookie实现（你提到的需求方案） #

如果需要通过Cookie存储位置信息，可按以下步骤操作：

• 第一步：修改JS代码，获取经纬度后写入Cookie：

// Cookie写入方法
function setCookie(name, value, validDays = 1) {
  const d = new Date();
  d.setTime(d.getTime() + (validDays * 24 * 60 * 60 * 1000));
  const expires = "expires="+ d.toUTCString();
  document.cookie = name + "=" + value + ";" + expires + ";path=/";
}

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
}

function showPosition(position) {
  // 经纬度写入Cookie
  setCookie('user_lat', position.coords.latitude);
  setCookie('user_lng', position.coords.longitude);
}

• 第二步：在WordPress主题的functions.php文件中添加钩子，读取Cookie值注入到CF7邮件标签中：

add_filter('wpcf7_special_mail_tags', function($output, $name, $html) {
  if ($name === 'user_latitude_from_cookie') {
    return isset($_COOKIE['user_lat']) ? sanitize_text_field($_COOKIE['user_lat']) : '未获取到纬度';
  }
  if ($name === 'user_longitude_from_cookie') {
    return isset($_COOKIE['user_lng']) ? sanitize_text_field($_COOKIE['user_lng']) : '未获取到经度';
  }
  return $output;
}, 10, 3);

• 第三步：在CF7邮件模板中使用新增的特殊标签[user_latitude_from_cookie]和[user_longitude_from_cookie]即可。

注意事项 #

• 地理位置获取需要用户主动授权，若用户拒绝授权则无法拿到位置信息，建议做好兜底提示
• 只有HTTPS域名才能调用浏览器的地理位置接口，HTTP域名除了localhost本地测试环境外都无法正常使用

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