不用代码！WordPress最好用的表单插件 Fluent Forms 完整设置

Fluent Forms 完整使用文档（新手可直接照着用·永久版）

Fluent Forms 使用文档

文档版本：1.0

适用版本：Fluent Forms Free / Pro

适用场景：留言表单、报名表单、咨询表单、调研表单、弹窗表单

1. 插件介绍

Fluent Forms 是 WordPress 最快、最易用、无代码拖拽式表单插件，支持：

• 可视化表单编辑器
• 邮件通知 / 用户自动回执
• 验证码防垃圾
• 表单数据导出 Excel/CSV
• 自定义样式美化
• 弹窗表单 / 顶部按钮表单
• 与任何主题兼容（Blocksy/Astra/GeneratePress等）

2. 安装与启用

1. 进入 WordPress 后台 → 插件 → 安装插件
2. 搜索 Fluent Forms
3. 点击 安装 → 启用
4. 左侧出现菜单：Fluent Forms

3. 创建第一个留言表单（完整版）

3.1 新建表单

1. Fluent Forms → Add New Form
2. 选择 Blank Form（空白表单）
3. 输入表单名称：网站留言表单
4. 点击 Create Form

3.2 添加字段（完整版）

拖入以下字段：

1. 姓名（Name） → 必填
2. 邮箱（Email） → 必填 + 邮箱验证
3. 电话（Phone） → 选填
4. 留言内容（Textarea） → 必填
5. reCAPTCHA 验证码 → 必填
6. 提交按钮

3.3 保存表单

点击右上角 Save Form
复制表单短代码：
[fluentform id="X"]

4. 表单设置（核心）

4.1 提交成功提示

Settings → Confirmations → Show Custom Message

<div style="padding:14px;background:#f8fff9;border-left:4px solid #22c55e;border-radius:4px;">
<strong>提交成功！</strong><br>感谢您的留言，我们会尽快回复。
</div>

4.2 管理员邮件通知

Settings → Notifications → Add Notification

• Send To：你的邮箱
• 邮件标题：网站新留言：{input_name}
• 邮件内容：

<h3>您有一条新留言</h3>
<p>姓名：{input_name}</p>
<p>邮箱：{input_email}</p>
<p>电话：{input_phone}</p>
<p>留言：{input_textarea}</p>
<small>来自 {site_title}</small>

4.3 用户自动感谢邮件

新建通知 → Send To：{input_email}
标题：感谢您在{site_title}留言
内容：

您好 {input_name}，您的留言已收到，我们会尽快回复。

5. 防垃圾设置（必开）

Settings → Security & cPanel

• 开启 Honeypot
• 开启 reCAPTCHA v2
• 填写 Site Key + Secret Key

6. Blocksy 主题专用美化 CSS

Fluent Forms → Settings → Custom CSS

.fluent_form_outer {max-width:750px;margin:2rem auto;}
.fluent-form {background:#fff;padding:2.4rem;border-radius:var(--theme-border-radius);box-shadow:0 1px 4px rgba(0,0,0,0.05);}
.fluent-form .ff-el-form-control {border:1px solid #ddd;border-radius:var(--theme-border-radius);padding:12px;}
.fluent-form .ff-btn-submit {background:var(--theme-palette-color-3);color:#fff;border:none;border-radius:var(--theme-border-radius);padding:12px 24px;}
.fluent-form .ff-btn-submit:hover {background:var(--theme-palette-color-4);}
.ff-message-success {background:#f0fdf4!important;color:#166534!important;border:1px solid #16a34a!important;border-radius:var(--theme-border-radius)!important;}

7. 顶部按钮 + 弹窗表单（完整版）

7.1 顶部按钮

外观 → 自定义 → Header → Top Bar → 添加 HTML：

<a href="#0" class="button button-primary" id="openMessagePopup">在线留言</a>

7.2 弹窗代码（放到 外观 → 自定义 → 自定义 JS）

<style>
#popupOverlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);z-index:9999;display:none;align-items:center;justify-content:center;}
#messagePopup{background:#fff;width:90%;max-width:720px;padding:2rem;border-radius:var(--theme-border-radius);position:relative;}
#popupClose{position:absolute;top:1rem;right:1rem;background:none;border:0;font-size:1.5rem;cursor:pointer;}
</style>
<div id="popupOverlay">
<div id="messagePopup">
<button id="popupClose">×</button>
<h3>在线留言</h3>
[fluentform id="1"]
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
const o=document.getElementById('openMessagePopup'),p=document.getElementById('popupOverlay'),c=document.getElementById('popupClose');
o.onclick=e=>{e.preventDefault();p.style.display='flex';};
c.onclick=()=>p.style.display='none';
p.onclick=e=>e.target===p&&(p.style.display='none');
});
</script>

8. 查看与导出数据

1. Fluent Forms → Entries
2. 查看所有提交记录
3. 点击 Export → Export as CSV
4. 可用 Excel 直接打开

9. 常见问题

9.1 收不到邮件

安装 WP Mail SMTP 配置邮箱发送

9.2 表单样式难看

使用文档第 6 章 CSS 代码

9.3 垃圾留言太多

开启 reCAPTCHA 验证码

9.4 想做弹窗表单

使用文档第 7 章代码

9.5 如何放到页面

使用短代码：[fluentform id="X"]

10. 完整功能清单

✅ 拖拽表单构建
✅ 邮件通知
✅ 用户自动回执
✅ 验证码防垃圾
✅ 数据导出
✅ 自定义样式
✅ 弹窗表单
✅ 顶部按钮表单
✅ Blocksy 主题完美适配
✅ 手机自适应
✅ 商用级别可用