用 WPForms 做一个“联系我们”页面，并测试邮件通知
文章目录
网站搭建好以后，我准备给它加一个“联系我们”页面，让访客可以直接通过表单给我留言。
这次用到的工具是：
- WPForms：创建联系表单
- Elementor：编辑联系页面
- SiteGround 邮箱：接收表单通知邮件
最终效果是：用户填写信息后点击“发送”，我可以在邮箱里收到通知。
一、安装 WPForms 插件
先进入 WordPress 后台，打开：
插件 → 安装插件
搜索 WPForms，然后安装并启用。
WPForms 启用后，左侧菜单会出现 WPForms 入口。
二、编辑默认联系表单
进入：
WPForms → 全部表单
找到默认的联系表单
点击编辑，进入表单编辑器后，可以看到默认字段一般包括：
- 名字
- 电邮
- 评论或消息
可以用默认字段，但文案比较生硬，所以我把它们改得更自然一点。
三、修改名字字段
点击 名字 字段，进入左侧的：
字段选项 → Advanced
把占位符改成：怎么称呼你
同时打开：隐藏标签
这样前台不会显示单独的“名字”标题，只在输入框里显示提示文字。
四、修改邮箱字段
继续点击 电邮 字段，同样进入：
字段选项 → Advanced
把占位符改成：你常用的邮箱
并打开：隐藏标签
这样邮箱输入框在前台显示得更简洁。
五、修改留言字段
最后点击 评论或消息 字段。
进入：
字段选项 → Advanced
把占位符改成：告诉我你的问题
这个字段是多行文本框，用来让用户填写具体留言。
同样打开隐形标签。
到这里，表单字段就改好了。前台显示会变成：
- 怎么称呼你
- 你常用的邮箱
- 告诉我你的问题
比默认的“名字、电邮、评论或消息”自然很多。
六、新建“联系我们”页面
表单做好后，回到 WordPress 后台，新建一个页面。
进入：
页面 → 新建页面
页面标题填写：联系我们
七、用 Elementor 添加 WPForms 表单
新建页面后，点击：
使用 Elementor 编辑
进入 Elementor 后，在左侧搜索框输入：
wp
找到 WPForms 组件，然后拖到页面内容区域。
然后把 WPForms 表单拖放到页面。
八、调整页面排版
表单插入后，我在 Elementor 里简单调整了一下页面布局。
后面我又把页面排成了左右结构：
- 左侧：联系主题图片
- 右侧：联系表单
九、去服务器后台创建邮箱
这一步很重要，不能漏。
如果你想收到表单通知，需要先确认服务器后台已经创建了对应的邮箱账号。
我这里用的是 SiteGround举例。
进入 SiteGround 后台：
Email → Accounts
选择对应域名，然后创建邮箱账号。
创建完成后，SiteGround 会显示邮箱配置，例如：
- Incoming Server：mail.wumadev.com
- IMAP Port：993
- POP3 Port：995
- Outgoing Server：mail.wumadev.com
- SMTP Port：465
这些信息后面配置邮箱或 SMTP 插件时会用到。
这里要注意：
WPForms 只是表单插件，真正接收邮件的邮箱，需要先在服务器里创建好。
十、检查 WPForms 通知设置
邮箱创建好后，还要回到 WPForms 检查通知设置。
进入：
WPForms → 全部表单 → 编辑 → 设置 → 通知
确认 启用通知 是打开的。
重点检查这几个地方：
| 设置项 | 应该填什么 |
|---|---|
| 发送到电子邮件地址 | 你接收表单通知的邮箱 |
| 邮件主题行 | 比如“网站联系表单新留言” |
| 从名字 | 网站名称或表单名称 |
| 发件人邮箱 | 建议填写网站域名邮箱 |
| 回复至 | 选择用户填写的邮箱字段 |
| 电子邮件消息 | 保留 all_fields |
这里最容易出错的是 发件人邮箱。
建议使用网站自己的域名邮箱，不要直接用用户填写的邮箱当发件人。
用户邮箱更适合放在 回复至 里。
这样你收到邮件后，点击回复，就可以直接回复给用户。
十一、前台测试表单
最后一步，一定要自己测试。
打开“联系我们”页面，填写一组测试信息：
- 怎么称呼你
- 你常用的邮箱
- 告诉我你的问题
然后点击：
发送
提交后，去 WPForms 通知里设置的邮箱检查是否收到邮件。
如果能收到，说明联系表单已经正常工作。
如果收不到，优先检查：
- WPForms 通知邮箱是否填对
- SiteGround 里是否已经创建邮箱
- 邮件是否进了垃圾箱
- 是否需要配置 WP Mail SMTP
如果邮件经常进垃圾箱，建议继续配置 WP Mail SMTP，用真实邮箱的 SMTP 发信，会更稳定。
总结
这次做“联系我们”页面，关键不是单纯把表单放到页面上，而是要把整个链路打通：
创建表单 → 放进页面 → 创建邮箱 → 设置通知 → 前台测试
其中最容易漏掉的是两个地方：
- 服务器后台没有创建邮箱
- WPForms 通知设置里的邮箱信息没填对
只要这两个地方检查好，联系表单基本就可以正常使用了。
