Elementor 表单小工具：做一个能收询盘的表单

一、整体思路：一次制作，全站复用

表单是 B2B 网站把访客变成商机的入口。开工前先定一个管理策略，能省掉日后大量重复劳动 🎯：做一个「Section 模板」放表单，全站只此一份——联系页面、弹窗 Popup、产品页/侧边栏都插入同一个模板。

全站只有一个表单本体，改字段、改收件邮箱只改这一处。不要在每个页面分别拖 Form 部件各做一遍——三个月后你会面对 8 个字段不一致的表单。

💡 准备工作：表单提交后要靠网站的邮件功能发通知。WordPress 默认的 wp_mail() 到达率很差，先装好 WP Mail SMTP 之类的 SMTP 插件并配置好发信服务（Gmail、Outlook、腾讯企业邮等都有现成向导）。没配 SMTP，表单做得再漂亮也收不到邮件。

---

二、创建表单模板

🏗️ 2.1 新建 Section 模板

1. 后台进入 模板 → 已保存的模板（Saved Templates）→ Add New。
2. 模板类型选 Section（区块），起名「询盘表单」。
3. 进入编辑器，关掉模板推荐窗口。

🧩 2.2 拖入 Form 小部件

1. 左侧小部件面板搜索 Form。
2. 拖入画布，默认生成三个字段：Name、Email、Message。
3. 点中表单，左侧面板就是全部配置。

---

三、字段设计：问什么、怎么问

📋 3.1 推荐字段组合

B2B 询盘表单的经典六字段（按自己业务增删）：

• Name 姓名：Text 类型，必填
• Company 公司名：Text 类型，必填（B2B 必问）
• Email 邮箱：Email 类型，必填（自动校验格式）
• WhatsApp / Phone：Tel 类型，选填（中东、非洲、拉美客户必留）
• Country 国家/地区：Text 或 Select 类型，选填（判断市场与时区）
• Message 需求描述：Textarea 类型，必填（Rows 设 4–6）

⚠️ 字段克制原则：每多一个字段，提交率就掉一截。能后续邮件里问的，不要在表单里问。超过 8 个字段的询盘表单，基本是在劝退客户。

⚙️ 3.2 每个字段的五项设置

点中某个字段，逐项过：

1. Type（类型）：决定输入方式和校验。邮箱选 Email（自动查格式）、电话选 Tel（手机弹出数字键盘）、长文本选 Textarea、选项类选 Select/Radio/Checkbox。
2. Label（标签）：字段标题，让用户知道填什么。
3. Placeholder（占位提示）：输入框内的灰色示例，如 Your company name。
4. Required（必填）：打开后字段标 *，不填不能提交。
5. Column Width（列宽）：100% 独占一行；50% 两个字段并排一行——Name 和 Company 可以并排，省纵向空间。

✨ 3.3 表单美化

• 为了简洁，可以整体关闭 Label 显示（Form Fields 里把 Label 开关关掉），只靠 Placeholder 提示——外贸站主流风格。
• 样式标签里调：输入框高度、圆角 6px、边框浅灰、聚焦色用品牌色。
• 按钮：文字改为 Send Inquiry，宽度按需（全宽或自适应），颜色用品牌色。

🛡️ 3.4 防垃圾提交

询盘表单上线后很快会被机器人盯上，两种免费防线：

1. Honeypot 字段：在字段列表添加一个类型为 Honeypot 的字段——它在页面上不可见，真人不会填，机器人会填，填了就拦截。零成本，必加。
2. reCAPTCHA：在站点设置（或 Elementor → 设置 → 集成）里填入 Google reCAPTCHA v3 的密钥，然后在表单字段里加 reCAPTCHA 类型字段。对国内服务器注意网络可达性。

---

四、提交后动作：邮件 + 记录

表单的「Actions After Submit（提交后动作）」决定访客点提交后系统做什么。默认已带两个，保留并配置 ⚙️。

📮 4.1 Collect Submissions（后台记录）

自动把每次提交存进 Elementor → Submissions。

• 相当于内置的极简询盘管理系统，不用装额外插件。
• 在 Submissions 里可以看到每条记录的完整字段、提交时间、来源页面。
• 即使邮件发送失败，记录也在这里兜底——这就是为什么它必须保留。

✉️ 4.2 Email（邮件通知）

点开 Email 动作配置：

• To（收件人）：你的业务邮箱；多个收件人用英文逗号分隔
• Subject（主题）：新询盘：[field id="name"] 来自 [field id="company"]
• Message（正文）：默认 [all-fields] 输出全部字段，够用
• From Email：与 SMTP 配置一致的发件邮箱

💡 主题里的 [field id="name"] 是字段短代码，id 就是字段设置里的 ID。用动态主题能让业务同事在收件箱列表页就分辨询盘质量。

🎯 4.3 其他常用动作（按需添加）

点 Actions After Submit 的「+」可追加：

• Redirect（跳转）：提交后跳到「感谢页」——方便做转化追踪（GA4 事件、广告转化）。
• Email2：给提交者发一封自动回执（「我们已收到，将在 24 小时内回复」）。
• Mailchimp / ActiveCampaign 等：直接对接邮件营销平台，询盘自动进名单。

💬 4.4 自定义提示文案

在 Additional Options → Custom Messages 里改四种状态提示：

• 成功：Thanks! We'll reply within 24 hours.
• 失败、必填缺失、格式错误：按你的语气改写，别用默认英文腔。

---

五、发布与调用模板

💾 5.1 保存模板

Section 模板编辑完直接发布即可——它是「私有部件」，不设显示条件，等别处调用。

📞 5.2 在联系页调用

1. 打开联系页面，用 Elementor 编辑。
2. 拖一个 Template（模板） 小部件到页面里。
3. 在 Template 设置里搜索并选中「询盘表单」。

4. 表单完整呈现，发布页面。

之后改表单：改 Section 模板一处，联系页和全站所有调用点同步更新 ✅。

🧪 5.3 上线前测试

1. 在前台真实提交一条测试询盘。
2. 检查三处：
3. 📧 收件邮箱是否收到通知（记得看垃圾邮件文件夹）
4. 📋 Elementor → Submissions 是否有记录
5. 💬 提交者看到的成功提示是否正确
6. 故意留空必填项提交一次，确认错误提示正常。

---

六、常见问题排查

⛔ 6.1 提交后收不到邮件

按序排查（这是表单最高频问题）：

1. 查垃圾邮件文件夹——没配 SMTP 时通知邮件大概率进垃圾箱。
2. 确认已安装并配置 SMTP 插件，用插件自带的「发送测试邮件」验证发信链路。
3. 检查 Email 动作的收件地址拼写。
4. 服务器在国内的，确认 SMTP 端口（465/587）没被主机商封禁。
5. 无论邮件通不通，Submissions 里都该有记录——没有记录说明表单本身没提交成功，看 6.2。

⛔ 6.2 点提交按钮没反应 / 报错

• 页面里混用了缓存插件的 JS 延迟加载，把 Elementor 的前端脚本延迟了——在缓存插件里排除 Elementor 的 JS。
• reCAPTCHA 密钥配错或域名不匹配：回站点设置重新生成密钥。

– 服务器 mod_security 类防火墙拦截：查看服务器错误日志，加白名单。

⛔ 6.3 表单字段样式和设置的不一致

• 主题给 input 元素写了强制样式。在站点设置的「表单字段」里统一配置，或用更高优先级的自定义 CSS 覆盖。
• 浏览器自动填充（autofill）的黄色背景是浏览器行为，属正常。

⛔ 6.4 想给不同产品页用不同表单

本课的「单模板复用」策略适合通用询盘。需要按产品区分时：建多个 Section 模板（如「询盘-产品线A」），各页面调用各自模板。也可以在表单里加一个隐藏字段（Hidden 类型），用动态标签自动填入当前页面标题，一份表单也能分辨来源页。

⛔ 6.5 把第三方表单短代码放进来样式崩了

WPForms / Contact Form 7 的表单可以用短代码嵌入 Elementor 页面，但样式体系独立，统一风格费劲。能用 Form 小部件做的，优先用原生做。特别注意：不要把第三方表单的短代码放进 Elementor 的 Popup 弹窗里——表单能正常显示，但点提交会失效、甚至弹窗直接被关掉（这类插件的脚本在页面加载时初始化，弹窗后渲染的表单初始化不上）。