用 HTML + JS + Elementor 表单（Popup）实现“提交表单后才显示下载链接”的完整技术方案（含 Email2 发客户 + 30 天免重复提交）

用一个 HTML+JS 下载中心页面管理所有产品与 Mega 链接；点击下载打开 Elementor Popup 表单；通过 sessionStorage + “提交前强制写 hidden fields”确保后台记录与 Email2 一定拿到 download_model/name/url；提交成功后弹窗与卡片下方显示单链接或双链接下载按钮，并用 localStorage 缓存 30 天免重复提交

cll_869241891

548人浏览 · 2026-02-07 10:16:42

cll_869241891 · 2026-02-07 10:16:42 发布

适用场景：
你有一批下载文件（例如 Mega 链接），不想把真实下载链接直接暴露在页面上；希望客户点击 “Download (Request Access)” 后弹出表单，提交后才看到下载链接，同时把链接通过邮件发给客户；并且同一浏览器 30 天内再次点击同型号不再要求重复提交。

1. 需求目标与最终效果

你希望实现这些能力：

页面不直接显示真实下载链接（避免被爬虫/随便复制）
点击下载按钮 → 弹出 Elementor Popup（例如 Popup ID=3690）
在 Popup 中填写 Elementor Form（Form Name=download_request）
提交成功后立刻显示下载链接
- 单链接：显示一个 Download + Copy Link
- 组合包（例如 RIP9.03 系列）：显示两个链接（驱动 + 软件）
Email2 自动发客户邮件：把下载链接一起发给客户
30 天免重复提交：同一浏览器内访问同型号再次点击，直接显示下载链接
刷新页面后仍然有效：已解锁的型号，卡片下方会自动恢复显示下载按钮

2. 整体架构（你只需要维护一个页面代码）

实现方式是“前端主导 + Elementor 负责表单/邮件”：

下载页：使用一个 Elementor 的 HTML 小工具嵌入整页 HTML+JS
- JS 负责渲染下载卡片（型号/说明/版本/按钮）
- JS 负责打开 Popup、写入隐藏字段、处理成功状态、缓存访问权限
Popup（3690）：里面放 Elementor Form（download_request）
Email & Email2：表单提交后发送
关键修复点（非常重要）：
Elementor 表单是异步渲染的，你“提前 setTimeout 填 hidden 字段”经常会失败，所以必须在 submit 发生之前强制把 hidden 字段写进去，才能保证后台记录和 Email2 取到值。

3. Elementor 配置步骤（一次设置，后续复用）

3.1 Popup 设置

Popup ID：3690
打开弹窗的链接（Elementor 自动生成 hash），类似：
#elementor-action%3Aaction%3Dpopup%3Aopen%26settings%3D...

3.2 Form 设置

在 Popup 3690 中添加 Elementor Form：

Form Name：download_request

可见字段（示例）：

name（姓名）
email（邮箱）
company（公司，可选）
phone（电话，可选）
message（留言/订单信息/在哪里买）

必须增加 3 个隐藏字段（Hidden Field），Field ID 必须完全一致：

download_model
download_name
download_url

⚠️ 强烈注意：
隐藏字段 不要设置 pattern/正则，Mega 链接包含 # 等字符，pattern 很容易导致脚本报错、提交数据被拦截，最终出现你之前的情况：后台能收到提交，但 download_* 全是空。

3.3 Actions After Submit

Email（发你们内部）
Email2（发客户）

不要用 Redirect，否则客户看不到“提交后弹窗显示下载链接”的效果。

4. Email2 如何发给客户（并让邮件显示不乱）

4.1 Email2 收件人设置

Email2 → To 填：

[field id="email"]
（如果你的邮箱字段 ID 不是 email，就替换成实际 Field ID）

4.2 推荐：HTML 邮件模板（更稳定，样式不乱）

很多邮箱会过滤 <style>，所以邮件样式最稳的做法是：用 <table> + 内联样式。

Email2 → Message 直接复制：

<p>Hi <strong>[field id="name"]</strong>,</p>

<p>Thanks for your request! Your download is ready.</p>

<table cellpadding="0" cellspacing="0" border="0" style="width:100%;max-width:620px;border:1px solid #e5e7eb;border-radius:10px;">
  <tr>
    <td style="padding:14px 16px;">
      <p style="margin:0 0 10px 0;">
        <strong>Model:</strong> [field id="download_model"]<br/>
        <strong>Package:</strong> [field id="download_name"]
      </p>

      <p style="margin:0 0 6px 0;"><strong>Download Link(s):</strong></p>
      <p style="margin:0;line-height:1.6;">
        [field id="download_url"]
      </p>
    </td>
  </tr>
</table>

<p style="margin-top:14px;">
  <strong>Notes:</strong><br/>
  • If Mega shows a preview page, please click “Download” inside Mega.<br/>
  • If you have any installation issues, reply to <a href="mailto:tina@erasmart.com">tina@erasmart.com</a> and tell us your operating system (Windows/macOS) and printer model.
</p>

<p style="margin-top:16px;">Best regards,<br/>EraSmart Support Team</p>

4.3 主题（Subject）

建议：

Your Download Is Ready — [field id="download_model"]

5. 组合包（驱动+软件）如何做到“两个链接，逗号隔开”，且不新增字段？

你提出的要求是：

不新增字段
RIP9.03 系列提交后 Email2 里 [field id="download_url"] 要显示两个链接
两个链接用逗号隔开

实现方式：

对单链接产品：download_url = https://...
对组合包产品：download_url = 驱动链接, 软件链接

关键点：这个拼接必须发生在 表单 submit 之前，否则后台/邮件拿不到。

6. 技术关键：为什么你之前 download_* 为空？

常见原因几乎都是：

Popup 表单 DOM 还没渲染出来，你 setTimeout 写入失败
你只在 submit_success 后写入（太晚了，提交已完成）
hidden field ID 不一致，或带 pattern 导致校验失败/脚本报错
页面多次点击不同型号，变量被覆盖，最终提交的不是你想要的型号

✅ 正确且稳定的方案是：

点击按钮时：把当前选择写入 sessionStorage
表单 submit 发生前：从 sessionStorage 读取并强制写入 hidden fields
submit_success：用 hidden fields 的值作为“最终真相”渲染 UI、写缓存

7. 浏览器缓存（30 天免重复提交）怎么做？

用 localStorage 存一个对象：

ts：时间戳
models：已解锁型号集合
例如：

{
  "ts": 1730000000000,
  "models": {
    "RIP9.03 R1390": true,
    "EraRIP L805": true
  }
}

逻辑：

提交成功：写入 models[model]=true，并更新 ts
页面加载：如果未过期（30 天），恢复显示“Download ready”区域
再次点击同型号：不弹表单，直接显示下载按钮

8. 运营与维护建议（你以后更省事）

所有下载项目只在一个 JS 配置对象维护（downloads map）
组合包用 extraUrls（驱动+软件），单包只用 url
建议给每个条目写清楚：
- title / desc / file / version
  客户更不容易下载错
邮件发不稳定时，建议上 SMTP（FluentSMTP / WP Mail SMTP），从域名邮箱发信，提高到达率。

9. FAQ（常见问题）

Q1：为什么 Email2 有时候第二个链接不自动变成可点击？

因为不同邮箱对“纯文本链接识别”规则不同。
如果你要 100% clickable，可以把 download_url 写成 HTML <a>（仍然不新增字段），不过要确认你的邮件模板支持输出 HTML（通常支持）。

Q2：这种方案安全吗？

这是“前端门槛”，可以有效防止普通访客/爬虫直接拿到链接，但不是绝对安全（高级用户仍可分析前端）。
真正高安全需要“后端签名 URL/登录系统/一次性 token”等。

Q3：我以后想把下载分系列分类（RIP9.03 / EraRIP / RIIN）可以吗？

可以。给每个条目加 category 字段，然后按 category 渲染分组标题即可。

10. 一句话总结

用一个 HTML+JS 下载中心页面管理所有产品与 Mega 链接；点击下载打开 Elementor Popup 表单；通过 sessionStorage + “提交前强制写 hidden fields”确保后台记录与 Email2 一定拿到 download_model/name/url；提交成功后弹窗与卡片下方显示单链接或双链接下载按钮，并用 localStorage 缓存 30 天免重复提交。