今天创建了一个新的博客站点，需要创建一个Contact页面，Contact页面在博客中是很常见的一个页面，下面就分享下我是如何创建的这个页面，以及在过程中遇到的一个坑。
首先我们先介绍下过程中用到的WordPress插件，我们这里用到两个插件，Contact Form 7和Wp mail smtp，基本的Contact页面我们只需要用到插件的免费功能即可满足。
Wp mail smtp：可以理解为给你的网站增加了发件服务，在这里通过设置你的发件箱信息，使得你的网站具备了能向外发送邮件的能力。
Contact Form 7 ：用于设置Contact表单，Wp mail smtp中设置的发件箱要配置到Wp mail smtp中的发件箱中，收件箱一般为网站管理员邮箱。
这两个插件结合使用就可以简单快速的得到一个Contact页面及功能。当然我们也可以使用其他的插件，比如：这里的Contact Form 7也可以替换成WpForm插件，下次教程再介绍WpForm插件，只要能提供对应的服务能力就行。
下面的步骤以 WordPress 6.x 为例，演示如何使用 Contact Form 7 插件创建联系人表单，并通过 WP Mail SMTP 插件配置 SMTP 发信，使得 WordPress 能可靠地发送通知邮件。
一、安装和激活插件
这里很简单，就是常规的WordPress插件安装的方式，我们进入WordPress管理后台，进入插件管理页面，在插件市场找到对应的插件安装、启用即可。
- 安装 Contact Form 7：登录 WordPress 管理后台，进入“插件 → 安装插件”，搜索 “Contact Form 7”，点击“立即安装并启用”。该插件可以创建自定义联系表单，支持多种字段类型。
- 安装 WP Mail SMTP：同样在“插件 → 安装插件”页面搜索“WP Mail SMTP by WPForms”，安装后启用。该插件能让 WordPress 使用外部 SMTP 服务器发送邮件，解决主机不支持
mail()函数导致无法发送邮件的问题。
二、配置 WP Mail SMTP 插件
WP Mail SMTP 的作用是通过可靠的 SMTP 服务发送 WordPress 站点邮件（例如联系表单通知和找回密码邮件）。下面以配置 Hostinger 邮箱的 SMTP 为例，其他邮件服务配置方法类似：
- 获取hostinger邮箱：首先我们需要进入hostinger后台获取一个邮箱，hostinger支持获取免费邮箱关联自己的域名。按流程我们设置好自己的邮箱名，密码等等信息即可。这里默认是和你网站的域名绑定的，这样你就能获取到一个免费的邮箱作为你的网站发件箱，并且还是和你网站域名绑定的。
- 进入 WP Mail SMTP 设置页面：在 WordPress 后台点击“设置 → WP Mail SMTP”。
- 填写发件人信息：在“常规”选项卡中完成发件人信息的设置。发件人邮箱建议使用你开启 SMTP 服务的邮箱地址，以便邮件服务认同。这里的发件人必须是你第一步获取的邮箱名。
- 选择邮件发送方式：在“邮件服务（Mailer）”或“邮件程序”部分选择 “其他 SMTP”。如果你使用专用的邮件服务（例如 Gmail、Sendinblue、Mailgun 等），则选择对应项并按照向导填写 API 密钥；本文以其他 SMTP 为例。
- 配置 SMTP 参数：填写你的邮件服务器信息，例如：
输入完毕后点击“保存设置”。
三、使用 Contact Form 7 创建联系表单
- 创建新表单：在 WordPress 后台左侧选择“联系表单”，点击“添加新表单”，为表单命名并保存。Contact Form 7 提供文本、邮件、URL、电话、下拉菜单等预设字段，可以根据需要组合，表单中的 HTML 会包含标签代码。
- 编辑表单内容：在“表单”选项卡中可以编辑字段，使用
[text]、[email]、[textarea]等标签创建姓名、邮箱、留言内容等输入框。例如：
<label> 姓名
[text* your-name] </label>
<label> 邮箱
[email* your-email] </label>
<label> 主题
[text your-subject] </label>
<label> 留言内容
[textarea your-message] </label>
[submit "发送"]星号 (*) 表示必填字段。保存表单后，页面顶部会显示一段简码（例如
contact-form-7 id="123" title="联系我们"）。
- 配置邮件通知：切换到“邮件”选项卡，设置联系表单提交时发送的邮件内容：
- 收件人 (To)：填写希望接收通知的邮箱地址，可以是你自己的工作邮箱，默认值为：
[_site_admin_email]表示网站管理员邮箱，这个是取的wordpress中配置的网站管理员的邮箱。 - 发件人 (From)：建议填写与 WP Mail SMTP 配置一致的发件人邮箱，例如
你邮箱的名称 <you@example.com>；将默认的[your-mail]替换为实际邮箱地址，以避免主机阻止邮件发送。 - 主题 (Subject)：默认值为：
[_site_title] "[your-subject]"，取得是网站的title+联系人在表单中输入的主题。 - 额外邮件头 (Additional Headers)：可填写
Reply-To: [your-email]让你直接回复发件人。 - 邮件正文 (Message Body)：可以使用表单标签插入用户提交的内容，如：
- 收件人 (To)：填写希望接收通知的邮箱地址，可以是你自己的工作邮箱，默认值为：
From: [your-name] [your-email]
Subject: [your-subject]
Message Body:
[your-message]
--
This is a notification that a contact form was submitted on your website ([_site_title] [_site_url]).- 将表单嵌入页面：复制表单简码，新建或编辑一个页面（例如“联系我们”），将简码粘贴到页面内容区域并发布页面。访问该页面即可看到联系表单。
- 预览和测试：在浏览器访问“联系我们”页面，填写表单并提交。WP Mail SMTP 插件会使用你在设置中配置的 SMTP 服务发送通知邮件。若未收到邮件，检查 WP Mail SMTP 的 SMTP 设置（发件人邮箱、授权码、加密方式等）以及 Contact Form 7 中的收件人和发件人地址是否一致。
四、修改Contact Form 7样式
如上，可以看到Contact Form 7创建的联系页面默认的样式比较简陋，而且Contact Form 7不像WPForms插件可以灵活的修改表单的样式，这里我们提供一种方式来让我们Contact Form 7的样式更加美观。
遇事不决问AI，我们可以通过修改自定义CSS的方式去修改
📌 方法一：在 WordPress 外观 → 自定义 → 额外 CSS 中添加
CSS可以让AI提供，AI知道该如何去改Contact Form 7的样式，然后我们看效果后进行调整即可。
/* 修改输入框宽度 */
.wpcf7 input[type="text"].input-long,
.wpcf7 input[type="email"].input-medium {
width: 400px;
max-width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
/* 修改文本区域样式 */
.wpcf7 textarea.textarea-large {
width: 100%;
height: 150px;
padding: 10px;
border: 1px solid #aaa;
border-radius: 4px;
resize: vertical;
}
📌 方法二：编辑当前主题的 CSS 文件（如 style.css）
如果你使用的是子主题，可以直接在 style.css 文件中添加同样的样式代码。
五、常见问题与建议
- 邮件发送失败或表单提交后无响应：大多数情况是主机禁用 PHP 自带的
mail()函数，需要通过外部 SMTP 发送邮件。确保 WP Mail SMTP 插件配置正确，发件人邮箱和授权码填写无误，并在 Contact Form 7 的邮件设置中使用相同的发件人邮箱。 - 表单发送成功但未收到邮件：检查垃圾邮件箱。若仍未收到，尝试更换 SMTP 端口 (465 → 587) 或选择 TLS 加密，某些服务器对端口或加密方式有要求；其次可以检测
Reply-To，需要与发件箱保持一致，否也会认为是垃圾邮件。这两点是我这一次在配置过程中遇到的，导致邮件一直发不出去，错误如下：
- 使用外部邮件服务（如 Mailgun、Sendinblue 等）：WP Mail SMTP 支持通过 API 方式连接多个外部邮件服务。配置流程通常为：在邮件服务网站创建账号、获取 API 密钥，在 WP Mail SMTP 设置页面选择对应的邮件服务，输入 API 密钥并保存；然后在 Contact Form 7 中创建表单并使用该服务发送邮件。
总结
通过安装并配置 Contact Form 7 与 WP Mail SMTP 插件，可以快速在 WordPress 中创建一个可靠的“联系我们”功能。Contact Form 7 提供灵活的表单定制功能，WP Mail SMTP 负责通过第三方 SMTP 或邮件服务发送通知邮件，解决 WordPress 默认邮件功能不稳定的问题。按照本教程的步骤设置后，就可以在你的 WordPress 网站上轻松收取客户或访客发送的询盘和留言。
