您现在的位置是：首页 > WordPress教程WordPress教程

WordPress联系表单添加

WP集市 2025-09-10 【WordPress教程】 1316人已围观

好的，请看：

咱们先唠唠为啥要给WordPress加个联系表单。你想啊，一个网站，光让人看，不让别人说话，那多没劲，就像开个店没留门，顾客想买东西都进不来。联系表单就是这个“门”，让访客能轻松给你发邮件，问问题、谈合作，都不用暴露你自己的邮箱地址，避免被垃圾邮件盯上，安全又方便。
那咋加呢？最省心、最“WordPress”的做法，就是装个插件。你别想着自己从头写代码，那太费劲了，有现成的轮子不用是啥毛病？众多插件里，Contact Form 7 和 WPForms 是俩大热门。咱就拿 Contact Form 7（简称CF7）举例子吧，因为它免费又强大，用的人巨多。
首先，你得去后台插件库把它请回来。路径是：WordPress后台左边菜单栏 -> “插件” -> “安装插件”，然后在搜索框里敲 “Contact Form 7”，找到它，点“安装”，再点“激活”。完事儿后，你左边菜单会多出来一个“联系表单”的选项。
安装好了，不算完，你得创建一个表单。点进“联系表单” -> “添加新的”。你会看到一个默认的表单模板，里面已经有了一些代码，比如 [text* your-name] 啥的。这个就是CF7的短代码（Shortcode），它定义了表单里有什么字段。你别怕，它看着复杂，其实逻辑很简单。
```
<label>你的大名 (必须填)
    [text* your-name] </label>

<label>电子邮箱 (必须填)
    [email* your-email] </label>

<label>你想说啥？
    [textarea your-message] </label>

[submit "发送！"]
```
上面这段代码，就意味着表单里会有一个必填的文本框（姓名），一个必填的邮箱框（会验证邮箱格式），一个可以写好多字的文本框（留言），还有一个发送按钮。你完全可以自己改，比如加个电话字段 [tel your-phone]。
光有字段不行，你得告诉WordPress，有人填了这个表之后，这邮件往哪儿发啊？往下拉，找到“邮件”标签页。这里才是关键设置！

收件人：这里通常填你管理员的邮箱，但最好别直接写死，用短代码 [your-email] 反而容易出错。我一般就直接填自己的邮箱，比如 admin@yourdomain.com。这样，所有通过表单发来的邮件，都会塞到你这个邮箱里。

主题：你可以自定义邮件主题，比如“网站有新留言来自：[your-name]”。这里的 [your-name] 就是引用访客填的名字，这样你一看邮件标题就知道是谁发的。

邮件正文：这里同样可以用短代码把表单里填的内容拉过来，比如：
```
发件人： [your-name] <[your-email]>
主题： [your-subject]

留言内容：
[your-message]
```
这样，一封格式清晰的邮件就组裝好了。
好了，表单和邮件都设置妥了，怎么把它放到网站页面上呢？CF7给了你一个更简单的办法——短代码。在你编辑好的表单页面，你能看到一个像 [contact-form-7 id="123" title="联系我们"] 的东西。你复制这串代码。
然后，去你想让表单出现的地方。比如，要放在一个页面里，你就新建一个页面，或者编辑一个已有的页面（比如“联系我们”页面）。在古腾堡编辑器里，添加一个“自定义HTML”区块，或者经典编辑器里切换到“文本”模式，把刚才复制的那串短代码粘贴进去。发布页面后，你就能看到你做的表单华丽地出现了。
诶，这时候你可能觉得默认的表单样子太丑了，跟你的主题不搭。这就涉及到样式调整了。CF7生成的表单，每个字段都会被包裹在一堆有特定class的<span>标签里。你可以用额外的CSS来给它化妆。

比如，你想让所有输入框宽度变成100%，可以这样写：
```
.wpcf7-form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px; /* 给边框加个圆角，好看点 */
}
```
这段代码你得填到后台的“外观” -> “自定义” -> “额外CSS”里。这就考验你的CSS功底了，想改成啥样就改成啥样。
最后，再啰嗦一点安全性的问题。CF7默认有简单的防垃圾邮件功能，但厉害的垃圾发送机器人还是能钻空子。如果你发现开始收到大量垃圾邮件，可以考虑额外安装一个像 Really Simple CAPTCHA 或 reCAPTCHA 的插件，给表单加个验证码，证明操作的是个真人。一般在CF7的整合设置里就能搞定。
总之呢，在WordPress里加个联系表单，核心思路就是：选插件 -> 装插件 -> 配置表单和邮件 -> 用短代码放到页面 -> 按需美化样式。遵循这个路子，十分钟就能搞定一个功能完备的联系页面，让你的网站从此有了和外界沟通的桥梁。别想得太复杂，动手试试，错了就改，这才是搞WordPress的乐趣所在。