Fluent Forms 通用安装使用教程（适用于所有 WordPress 主题）

零代码、全功能、通用版｜可直接用于视频、文章、粉丝教程

---

一、插件介绍

Fluent Forms 是 WordPress 最轻量、最强大的表单构建插件，支持所有主题：
Astra、Blocksy、GeneratePress、Salient、Divi、Avada 等全部兼容。

你可以用它做：
✅ 留言表单
✅ 联系表单
✅ 报名表单
✅ 邮件通知
✅ 自动回执
✅ 验证码防垃圾
✅ 导出 Excel
✅ 弹窗表单

---

二、插件安装（所有主题通用步骤）

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

启用完成，左侧出现 Fluent Forms 菜单，安装结束。

---

三、创建通用留言表单（所有主题通用）

1. 新建表单

Fluent Forms → Add New Form
选择 Blank Form（空白表单）
输入名称：通用留言表单
点击 Create

2. 添加字段（直接拖）

1. 姓名 — 必填
2. 邮箱 — 必填 + 邮箱格式验证
3. 电话 — 选填
4. 留言内容（多行输入框）— 必填
5. reCAPTCHA 验证码 — 必填
6. 提交按钮

3. 保存表单

保存后复制你的表单短代码：
[fluentform id="1"]

---

四、提交成功提示（通用）

表单编辑页 → Settings → Confirmations
选择 Show Custom Message
粘贴内容：

留言提交成功！感谢你的支持，我们会尽快回复。

---

五、邮件通知设置（通用）

1. 管理员通知

Add Notification

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

姓名：{input_name}
邮箱：{input_email}
电话：{input_phone}
留言：{input_textarea}

2. 用户自动感谢邮件

Add Notification

• Send To：{input_email}
• 标题：感谢你的留言
• 内容：

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

---

六、防垃圾验证码（通用）

1. Fluent Forms → Settings → reCAPTCHA
2. 选择 Version 2
3. 填写 Site Key / Secret Key
4. 编辑表单，加入 reCAPTCHA 字段

完成后可防止 99% 垃圾留言。

---

七、通用美化 CSS（适用于任何 WordPress 主题）

复制这段代码，粘贴到：
Fluent Forms → Settings → Custom CSS

/* Fluent Forms 通用样式 - 所有主题兼容 */
.fluent_form_outer {
  max-width: 750px;
  margin: 30px auto;
}
.fluent-form {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.fluent-form .ff-el-group {
  margin-bottom: 18px;
}
.fluent-form .ff-el-form-control {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 15px;
}
.fluent-form .ff-btn-submit {
  background: #0d6efd;
  color: #fff;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
  cursor: pointer;
}
.fluent-form .ff-btn-submit:hover {
  opacity: 0.9;
}
.ff-message-success {
  background: #f8fff9 !important;
  color: #22c55e !important;
  padding: 14px !important;
  border-radius: 6px !important;
  border: 1px solid #22c55e !important;
}

---

八、任何主题都能用的弹窗表单（通用代码）

将以下代码放入 外观 → 自定义 → 自定义 JS 即可：

<style>
#popup{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:99999;visibility:hidden;opacity:0;transition:all 0.3s;}
#popup.active{visibility:visible;opacity:1;}
#popup .content{background:#fff;width:100%;max-width:700px;padding:30px;border-radius:10px;position:relative;}
#popup .close{position:absolute;top:15px;right:15px;font-size:22px;cursor:pointer;background:none;border:none;}
</style>
<div id="popup">
  <div class="content">
    <button class="close">×</button>

[fluentform id=”1″]

</div> </div> <script> document.addEventListener(‘click’,function(e){ if(e.target.getAttribute(‘href’)==’#open-form’){ e.preventDefault(); document.getElementById(‘popup’).classList.add(‘active’); } if(e.target.classList.contains(‘close’)||e.target.id==’popup’){ document.getElementById(‘popup’).classList.remove(‘active’); } }); </script>

按钮放任何页面：

<a href="#open-form" class="button">在线留言</a>

---

九、发布表单（任何主题通用）

1. 新建页面
2. 添加 短代码块
3. 粘贴：
   [fluentform id="1"]
4. 发布

表单立即上线。

---

十、查看与导出数据（通用）

Fluent Forms → Entries

• 查看所有提交
• 导出为 Excel/CSV
• 支持搜索、筛选、删除

---

十一、最常见问题（通用解决方案）

1. 收不到邮件？
   安装 WP Mail SMTP 即可解决。
2. 表单样式不好看？
   使用第七段 通用CSS。
3. 垃圾留言太多？
   开启 reCAPTCHA 验证码。
4. 想做弹窗？
   使用第八段代码。
5. 如何放到页面/文章/侧边栏？
   使用短代码：[fluentform id="1"]

---

🔥 本教程特点

✅ 适用于所有 WordPress 主题
✅ 零代码
✅ 可直接用于视频教程
✅ 可直接发给粉丝/客户
✅ 干净、简洁、商用级别