正文

手把手教你用WordPress表单插件搭出高转化联系页，避开这5个要命的大坑

电云鑫华
电云鑫华 V管理员 /1.09 K阅读/3评论
0725
文章最后更新时间2026年07月25日，若文章内容或图片失效，请留言反馈！

先别急着去插件商店搜“表单”，听我说完这句：90%的新手站长第一次装表单插件，都会在邮件收不到、样式跑偏、垃圾信息轰炸这三个坑里摔得鼻青脸肿，今天我不跟你扯那些云里雾里的代码，就用最笨的办法、最全的截图逻辑，带你从零装一个能用的表单——全程不超过二十分钟，你只要会点鼠标就行。

这篇教程适合谁看？

  • 刚刚买了域名和服务器,正在用WordPress搭建第一个网站的纯小白（连“短代码”都没听过的那种）
  • 被各种免费插件折腾过,想要一套不出错的“标准答案”的站长老实人
  • 英语不好、看不懂国外插件后台英文界面的朋友（放心，我全给你翻译成大白话）
  • 以及那些安装完插件后发现“怎么有的功能要付费”就头大的用户——今天咱们就用免费版也能把事办漂亮

第一步：选哪个插件？为什么我推荐这个？

市面上常见的有Contact Form 7（简称CF7）、WPForms Lite、Fluent Forms，我知道CF7免费且轻量，但它的后台对新手极不友好——你连“邮件发不出去”的错误提示都看不懂，所以我选WPForms Lite，原因很简单：

手把手教你用WordPress表单插件搭出高转化联系页，避开这5个要命的大坑

手把手教你用WordPress表单插件搭出高转化联系页，避开这5个要命的大坑

  • 它有一个“拖拽式”表单编辑器，跟玩拼图似的，不需要写任何HTML
  • 免费版就自带“简单联系表单”模板，一键生成
  • 它内置了反垃圾邮件机制,不用额外装插件

别嫌它英文界面——我接下来说的每一步都对应着屏幕上的按钮位置，你跟着点就行。

第二步：安装与激活（别再下盗版了）

  1. 在WordPress后台左侧菜单找到“插件” → “安装插件”。
  2. 在搜索框输入 WPForms 三个字母，回车，你会看到一个橙色的图标，作者是“WPForms”，点“现在安装”。
  3. 安装完毕后,点“启用”，这时候左侧菜单会多出一个叫“WPForms”的入口——对，就是那个画着信封的图标。

踩坑提醒①：不要手贱去下载所谓的“破解版”或者“完整版”，免费版够用，而破解版往往被植入了后门邮件脚本，你的网站会变成垃圾邮件发送机，第二天就被服务器商封了。

第三步：创建一个联系表单（3分钟搞定）

  1. 点击左侧“WPForms” → “添加新建”。
  2. 弹窗里会让你选模板,直接点“简单联系表单”（Simple Contact Form）——注意，免费版只有这一个模板是开箱即用的，其他都要付费，别慌，这个模板已经包含“姓名、邮箱、留言内容”三个字段，足够用。
  3. 进入编辑器界面,左边是字段库（Name、Email、Message等），右边是预览，你可以拖拽左边的字段到右边，也可以删除多余字段，比如去掉“电话”字段——很多用户填表时最烦留电话。
  4. 把鼠标悬停在“Name”字段上，点那个小齿轮，可以改标签文字，把“Name”改成“您的称呼”，把“Message”改成“您想说的话”，最后点右上角“保存”。

第四步：把表单放到页面里（两种方法，选一种）

方法一（推荐新手）：用内置的嵌入按钮

  • 在刚保存的表单编辑界面,点右上角的“Embed”按钮，选择“Create New Page”，输入页面标题“联系我们”，点“Let’s Go”，这样WordPress会自动帮你新建一个页面，并把表单短代码插入进去。

方法二（手动插入）：

  • 复制短代码 [wpforms id="123"]（id数字是你的表单ID，在表单列表里能看到）。
  • 新建页面或编辑已有页面,在编辑器的“+”号处插入“短代码”区块，粘贴进去，发布即可。

踩坑提醒②：如果你的主题编辑器是古腾堡（Gutenberg），千万不要把短代码粘贴到“经典编辑器”区块的文本模式里——很多人因为这样操作导致短代码被当成纯文本显示出来，正确做法是使用“短代码”专用区块。

第五步：配置邮件通知（这步最容易翻车）

表单发布后,别人填了信息，你希望能收到邮件通知，对吧？这就是大多数人骂“WPForms怎么收不到邮件”的原因——你的服务器默认邮件系统几乎100%发不出信，因为你没配SMTP。

配置方法：

  1. 进入WPForms → 设置 → 邮件（Email），这里需要填一个“发件人邮箱”地址，强烈建议用你的企业邮箱或QQ邮箱等真实邮箱，不要用wordpress@你的域名这种系统默认地址。
  2. 安装一个SMTP插件,我推荐免费的“WP Mail SMTP”（也是WPForms作者开发的，兼容性好），安装激活后：
    • 在“设置” → “WP Mail SMTP”里，选择邮箱服务商，如果你用QQ邮箱，选“Other SMTP”。
    • 填上：主机 smtp.qq.com，端口 465，加密方式 SSL。
    • 认证：你的QQ邮箱账号，以及从QQ邮箱设置里生成的“授权码”（不是微信密码也不是QQ密码，是专门给第三方客户端用的16位密码）。
    • 保存后发一封测试邮件,如果收到，大功告成。

踩坑提醒③：别偷懒用“Mailgun”或“SendGrid”这些国外服务，因为很多新手搞不定域名DNS的SPF/DKIM记录，反而弄巧成拙，QQ邮箱或163邮箱的SMTP对国内服务器最友好，而且完全免费。

第六步：配置确认消息（让访客不迷茫）

别人提交表单后,最好跳转到一个感谢页面，或者显示一段文字，否则他以为出错了，在表单编辑界面，点“设置” → “确认”：

  • 我建议选“显示消息”，输入“感谢您的留言，我们会尽快回复您！” 或者选“重定向”到一个自定义感谢页（比如你制作的“谢谢您.html”页面，注意URL写完整）。

第七步：加一道反垃圾防线（免费版自带的就够）

WPForms Lite内置了一个隐藏的“反垃圾”字段——就是一个人类看不见的输入框，机器人通常会自动填它，如果填了，表单就提交失败，这个默认是开启的，你不用动，但如果你发现垃圾留言依然很多，可以再开启一个非必填的验证码勾选框（在字段库里找到“Recaptcha”字段拖进去，但注意免费版只能使用内置简单验证，不推荐去折腾Google reCAPTCHA，因为国内访问谷歌很慢，反而影响体验）。

常见踩坑终极清单（我替你踩过了）

  1. 表单样式跟主题冲突怎么办？
    很多主题（尤其是页面构建器做的）会覆盖表单的CSS，最简单的办法：在WPForms → 设置 → 常规里，勾选“禁用表单样式” → 保存，这时候表单会变成最原始的无样式状态，然后用你的主题自带样式去覆盖，或者你直接在后来的自定义CSS里写样式，但我建议新手：先用这个默认无样式的版式，至少它不会变形。

  2. 中文乱码或提交后一片空白
    大概率是你服务器PHP内存不足或者字符集不对，打开你的wp-config.php文件，找到 define('DB_CHARSET', 'utf8'); 确认是utf8，在WPForms设置里，把“邮件内容类型”从“HTML”改成“纯文本”试试——有些主机对HTML邮件不友好。

  3. 手机端表单按钮太小
    在WPForms的自定义CSS里（如果没有，就去主题的自定义额外CSS里）加这段：

    .wpforms-submit { padding: 12px 30px; font-size: 16px; }

    宽度不够可以再加 width: 100%;。

  4. 表单提交后没反应，也不报错
    先检查浏览器控制台有没有JS报红，大概率是因为某个插件冲突，先禁用所有插件，只保留WPForms和WP Mail SMTP，看能否提交，如果能，再逐个开启其他插件排查。

  5. 想加一个“文件上传”字段怎么办？
    免费版不支持文件上传功能，但你可以用“文本”字段让用户输入文件链接，或者干脆用“多选”字段让用户选择“我需要什么帮助”，如果非要上传，要么升级付费版，要么换用免费的“Fluent Forms” Lite版（它免费支持单个文件上传）。

最后一句忠告：表单插件装好之后，你自己先打开前端页面填一次，提交一次，去QQ邮箱检查是否收到——这一步比任何教程都重要，别等客户说“我填了三遍都报错”你才知道出问题，关掉这篇文章，去实操吧。