客户消息及时反馈

目标

设计表单，实现较强的目标导向。表单上有一句非常关键的承诺："业务经理将在 30 分钟内与您联系"。

基于这个"30分钟高时效"的承诺，以及表单只收集了"姓名"和"手机号"这一事实，提交后的操作必须分为**对内（销售团队）和对外（客户）**两条线来设计。

以下是最合适的提交通知策略：

一、对内通知（销售团队）：追求"秒级"触达

为了确保业务经理能在 30 分钟内响应，内部通知必须做到强提醒、防漏接。

首选：企业 IM 机器人推送（钉钉 / 飞书 / 企业微信）
- 为什么： 这是目前国内 B2B 销售团队响应最快的方式。
- 做法： 用户一点击提交，后台立刻通过 Webhook 给销售群发一条卡片消息。
- 内容示例： 🚨【新线索】客户 [姓名] 正在寻价 [干壁钉系列]，电话：[手机号]。请在 30 分钟内跟进！
备选/升级：销售人员手机短信或语音呼叫
- 为什么： 如果是在非工作时间，或者 IM 消息容易被淹没，高价值的大宗采购线索值得直接发短信甚至触发自动语音电话提醒销售。
存档处理：邮件通知或 CRM 录入
- 为什么： 邮件的实时性较差，不适合用来满足"30分钟响应"的需求，但非常适合作为数据备份，或者直接通过 API 将线索写入你们的客户关系管理（CRM）系统，方便后续追踪转化率。

二、对外通知（客户）：建立信任，管理预期

由于表单没有收集客户邮箱，所以无法发送确认邮件。对客户的操作重点在于页面反馈和手机端的安抚。

必须做：页面结果反馈 (UI 弹窗/跳转)
- 做法： 提交按钮变为"提交中..."，成功后弹出清晰的成功提示，或者跳转到感谢页面。
- 文案建议： "提交成功！您的专属业务经理正在为您核算 [干壁钉系列] 的出厂底价，请留意接听来自 [021-XXXXXXX / 某某地区] 的电话。"（提前告知来电城市或号码，能大幅降低被当做骚扰电话拒接的概率）。
加分项：发送确认短信 (SMS)
- 为什么： B2B 采购通常比较严谨，一条官方短信能增加品牌信任度。
- 做法： 提交后立即下发一条短信给客户。
- 内容示例： 【您的品牌名】您好，我们已收到您的大宗采购需求。业务经理将尽快致电为您提供专属报价，请保持电话畅通。

💡 综合建议方案

对于大宗采购这种高客单价的场景，最成熟的自动化工作流是：

用户提交 →\rightarrow→ 页面弹出成功提示（告知来电信息）。
系统自动发短信给客户（占领心智）。
系统同时触发企业微信/钉钉机器人，将线索直接推送到销售业务群（保障 30 分钟响应）。

你会希望我为你提供哪一种通知方式（比如钉钉机器人、飞书 Webhook 或短信服务）的接入思路或代码示例呢？
"前端 UI 及时反馈 + 后端触发企业 IM 机器人（钉钉/企业微信/飞书）" 是目前转化率最高、成本最低的做法。

要实现这个功能，我们需要解决一个关键的技术问题：前端网页（HTML/JS）不能直接发送请求给钉钉/飞书的机器人。这不仅会遇到浏览器的跨域拦截（CORS），还会把你的机器人"密钥"直接暴露给所有人，非常不安全。

因此，完美的实现路径分为三步：我们将在你的 Ubuntu 服务器上建一个迷你的"后端接线员"（Node.js），它负责接收前端的表单，然后安全地呼叫业务群的机器人。

以下是完整的实战代码和步骤：

第一步：获取你的企业 IM 机器人 Webhook 链接

你需要先在你们公司常用的办公软件里建一个群，并拉入一个机器人：

钉钉/企业微信/飞书：建一个"新线索通知群"。
添加机器人：在群设置里添加一个"自定义机器人"。
获取 Webhook 地址 ：复制机器人提供的那个长长的 https://... 网址（先把它记在电脑的备忘录里）。

第二步：修改前端网页 (HTML + JavaScript)

在你的网页代码中，给表单元素加上 id，并用 JavaScript 接管"提交按钮"的点击动作。这样我们可以实现"提交中"的防重复点击效果。

在你的 HTML 文件底部（</body> 标签前），加上这段 <script>：

html 复制代码

<script>
  // 绑定提交按钮的点击事件
  document.getElementById('submitBtn').addEventListener('click', async function() {
    const btn = this;
    const nameInput = document.getElementById('customerName'); // 假设你的姓名输入框 id 是这个
    const phoneInput = document.getElementById('customerPhone'); // 假设你的手机输入框 id 是这个
    const productSelect = document.getElementById('productType'); // 假设你的产品下拉框 id 是这个

    const name = nameInput.value.trim();
    const phone = phoneInput.value.trim();
    const product = productSelect.value;

    // 1. 简单的表单验证
    if (!name || !phone) {
      alert('请填写您的称呼和手机号码哦！');
      return;
    }

    // 2. 改变按钮状态，防止用户疯狂连点
    const originalText = btn.innerText;
    btn.innerText = '提交中...';
    btn.disabled = true;
    btn.style.opacity = '0.7';

    try {
      // 3. 把数据发送给你的服务器（待会儿要配的接口）
      const response = await fetch('/api/submit-form', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, phone, product })
      });

      if (response.ok) {
        // 4. 成功反馈给客户
        btn.innerText = '提交成功！';
        btn.style.backgroundColor = '#28a745'; // 变绿色
        alert('提交成功！业务经理正在快马加鞭为您核算底价，请留意陌生来电。');
        
        // 可选：清空表单
        nameInput.value = '';
        phoneInput.value = '';
      } else {
        throw new Error('提交失败');
      }
    } catch (error) {
      alert('网络好像开小差了，请稍后再试或直接拨打客服电话。');
      btn.innerText = originalText;
      btn.disabled = false;
      btn.style.opacity = '1';
    }
  });
</script>

记得确保你 HTML 里的 <input> 和 <button> 标签的 id 属性与代码里的对应上。

第三步：在服务器部署迷你后端 (Node.js)

这个后端脚本就像一个接线员，专门负责接收上面这段前端代码发来的数据，并推送到机器人。

登录你的 Ubuntu 服务器 ，安装 Node.js：
bash 复制代码
```
sudo apt update
sudo apt install nodejs npm -y
```

创建一个接口文件夹并进入 ：

bash 复制代码

mkdir ~/shenbai-api && cd ~/shenbai-api
npm init -y
npm install express cors node-fetch@2

创建后端代码文件 ：

bash 复制代码

nano server.js

粘贴以下代码（务必把 Webhook 换成你自己的）：

javascript 复制代码

const express = require('express');
const fetch = require('node-fetch');
const app = express();

// 解析前端发来的 JSON 数据
app.use(express.json());

// 接收表单的接口
app.post('/api/submit-form', async (req, res) => {
    const { name, phone, product } = req.body;

    // 拼装你要发给业务群的消息内容
    const messageContent = `🚨【新询盘提醒】\n客户称呼：${name}\n手机号码：${phone}\n需求产品：${product}\n请在 30 分钟内致电跟进！`;

    // 注意：这里以【企业微信机器人】或【钉钉机器人】的数据格式为例
    // 如果用的是飞书，格式稍微不同
    const payload = {
        msgtype: "text",
        text: { content: messageContent }
    };

    try {
        // 把消息推送给机器人 Webhook
        // 【请把下面这个网址换成你真实的 Webhook 网址！！！】
        const WEBHOOK_URL = 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxxx-xxxx-xxxx'; 
        
        await fetch(WEBHOOK_URL, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });

        res.status(200).json({ success: true, message: '已通知销售' });
    } catch (error) {
        console.error('推送失败:', error);
        res.status(500).json({ success: false, message: '服务器错误' });
    }
});

// 让这个小后端运行在 3000 端口
app.listen(3000, () => {
    console.log('接线员已上线，监听 3000 端口');
});

保存并退出 (Ctrl+O -> Enter -> Ctrl+X)。

测试运行 ：输入 node server.js，如果看到"接线员已上线"，说明成功了！按 Ctrl+C 先退出来。

第四步：让 Nginx 帮忙转发

最后，我们需要告诉 Nginx：如果有人访问 /api 开头的路径，就把流量转给刚刚写的 3000 端口（Node.js），其他的依然按原样显示网页。

打开你的 Nginx 配置文件 ：
bash 复制代码
```
sudo nano /etc/nginx/sites-available/shenbai
```

在 listen 443 ssl; 那个大括号里，加上这一段：

nginx 复制代码

# 拦截 API 请求，转发给本地的 Node.js 接线员
location /api/ {
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
}

保存并重启 Nginx ：

bash 复制代码

sudo nginx -t && sudo systemctl restart nginx

完成以上操作后，你的表单就具备了真正的实战能力。用户点击提交 -> 页面提示成功 -> 你的工作群瞬间叮咚作响！

你们业务团队目前主要使用的是钉钉、企业微信，还是飞书呢？ 不同的软件在推送信件时 Payload 格式有一点点区别，如果你用的是飞书，我可以帮你调整一下上面的那行格式代码。

客户消息及时反馈

一、 对内通知（销售团队）：追求"秒级"触达

二、 对外通知（客户）：建立信任，管理预期

💡 综合建议方案

第一步：获取你的企业 IM 机器人 Webhook 链接

第二步：修改前端网页 (HTML + JavaScript)

第三步：在服务器部署迷你后端 (Node.js)

第四步：让 Nginx 帮忙转发

一、对内通知（销售团队）：追求"秒级"触达

二、对外通知（客户）：建立信任，管理预期