WordPress Contact Form 7：随表单数据传递自定义HTML及购物篮数据

嗨，我来给你梳理下怎么搞定这个需求——其实你一开始想到的隐藏字段思路完全是对的，这也是目前最直接的方案，毕竟LocalStorage是前端存储，后端（包括Contact Form 7）没法直接读取，必须通过表单把数据带过去。下面是具体的分步实现：

第一步：在CF7表单中添加隐藏字段 #

打开你的Contact Form 7编辑界面，在表单内容里添加一个带ID的隐藏字段，用来临时存储购物篮数据：

[hidden basket-data id="basket-data"]

这个字段的作用就是把前端读取到的购物篮数据暂存，提交表单时一起发给后端。

第二步：编写前端JS读取LocalStorage并填充隐藏字段 #

接下来需要一段JavaScript代码，负责从LocalStorage里取出购物篮数据，转成可读性强的格式，然后填充到上面的隐藏字段里。你可以把这段代码放在表单页面的footer里，或者通过主题的「自定义JS」功能添加：

// 页面加载完成后读取购物篮数据
document.addEventListener('DOMContentLoaded', function() {
    // 替换成你实际存储购物篮的LocalStorage键名
    const basketKey = 'user-shopping-basket';
    const basketData = localStorage.getItem(basketKey);
    const basketField = document.getElementById('basket-data');

    if (basketData && basketField) {
        let basketText = '';
        try {
            // 解析购物篮的JSON数据（假设你的购物篮是JSON格式的数组）
            const basketItems = JSON.parse(basketData);
            // 把每个商品转成清晰的文本格式
            basketItems.forEach(item => {
                basketText += `- 商品名称：${item.name || '未命名商品'}\n  数量：${item.quantity || 1}\n  单价：${item.price || '0元'}\n\n`;
            });
            // 如果购物篮为空，显示提示
            basketField.value = basketText || '购物篮为空';
        } catch (error) {
            // 解析失败时直接保留原始数据，方便排查问题
            basketField.value = `购物篮数据解析失败：${basketData}`;
        }
    } else {
        basketField.value = '购物篮为空';
    }
});

// 可选：表单提交前再更新一次数据，防止用户在页面加载后修改了购物篮
document.addEventListener('wpcf7submit', function() {
    const basketKey = 'user-shopping-basket';
    const basketData = localStorage.getItem(basketKey);
    const basketField = document.getElementById('basket-data');

    if (basketData && basketField) {
        let basketText = '';
        try {
            const basketItems = JSON.parse(basketData);
            basketItems.forEach(item => {
                basketText += `- 商品名称：${item.name || '未命名商品'}\n  数量：${item.quantity || 1}\n  单价：${item.price || '0元'}\n\n`;
            });
            basketField.value = basketText || '购物篮为空';
        } catch (error) {
            basketField.value = `购物篮数据解析失败：${basketData}`;
        }
    } else {
        basketField.value = '购物篮为空';
    }
}, false);

关键注意点： #

• 一定要把代码里的user-shopping-basket替换成你实际用来存储购物篮的LocalStorage键名（比如你的代码里可能用的是cart-items之类的）。
• 如果你的购物篮数据结构和示例不一样（比如商品字段叫productName而不是name），要对应修改item.name这类属性，匹配你的实际数据。
• 可以根据需求调整商品文本的格式，比如加上商品ID、总价等信息。

第三步：在CF7邮件模板中调用隐藏字段数据 #

最后，打开CF7的「邮件」设置界面，在邮件内容里加入隐藏字段的标签，这样管理员就能收到包含购物篮数据的邮件了：

用户咨询信息：
姓名：[your-name]
邮箱：[your-email]
电话：[your-phone]
留言内容：[your-message]

---
购物篮商品详情：
[basket-data]

额外的优化建议 #

• 安全过滤：如果担心商品名称里有特殊字符，可以给文本加上简单的转义，比如把item.name改成item.name.replace(/</g, '&lt;').replace(/>/g, '&gt;')，避免邮件里出现乱码或潜在的XSS问题。
• 空购物篮提示：可以在表单里加个前端提示，当购物篮为空时提醒用户先添加商品，或者在邮件里明确显示「购物篮为空」。
• 测试验证：一定要测试几次——往购物篮加不同数量的商品，提交表单，检查邮件里的购物篮数据是否准确显示。

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