如何在HTML表单提交时隐藏传递用户IP与国家信息

我来帮你搞定这个问题！你已经能用ipinfo.io拿到用户的IP和位置信息了，现在只需要把这些数据像UTM参数那样塞进隐藏表单字段里，提交表单时就会自动传给你的Webhook啦，具体步骤如下：

1. 添加对应隐藏表单字段 #

和你处理UTM参数的方式完全一致，先给表单新增几个隐藏输入框，用来存储IP、国家（以及你需要的其他位置信息）：

<!-- 放在你的表单内部 -->
<input type="hidden" name="user_ip" id="user_ip" value="">
<input type="hidden" name="user_country" id="user_country" value="">
<!-- 如果需要城市/地区信息可以额外添加 -->
<input type="hidden" name="user_city" id="user_city" value="">
<input type="hidden" name="user_region" id="user_region" value="">

2. 修改IP信息获取脚本，给隐藏字段赋值 #

把你原来只用来展示信息的JavaScript代码，加上给隐藏字段赋值的逻辑——就在获取到ipinfo响应的回调函数里操作就行：

<script>
$.get("http://ipinfo.io", function (response) {
    // 保留原来的页面展示逻辑（如果不需要可以删掉）
    $("#ip").html("IP: " + response.ip);
    $("#address").html("Location: " + response.city + ", " + response.region);
    $("#details").html(JSON.stringify(response, null, 4));
    
    // 核心操作：把获取到的信息赋值给隐藏表单字段
    $("#user_ip").val(response.ip);
    $("#user_country").val(response.country);
    $("#user_city").val(response.city);
    $("#user_region").val(response.region);
}, "jsonp");
</script>

3. 和你的UTM脚本兼容（可选） #

如果你的UTM参数是存在sessionStorage里的，也可以把IP和位置信息存进去，避免用户刷新页面后丢失值。只需要在回调里加存储逻辑，再在你的queryForm函数里补充赋值：

// 在ipinfo的回调里添加存储
sessionStorage.setItem('user_ip', response.ip);
sessionStorage.setItem('user_country', response.country);

// 在你的queryForm函数里，循环处理完UTM后，或者单独添加：
document.getElementById('user_ip').value = sessionStorage.getItem('user_ip') || '';
document.getElementById('user_country').value = sessionStorage.getItem('user_country') || '';

这样修改后，当用户提交表单时，这些隐藏字段的内容就会和其他表单数据一起发送到你的Webhook，完全和你处理UTM参数的逻辑一致，完美解决你的需求！

内容的提问来源于stack exchange，提问作者Yağız Gürbüz