零代码！5分钟做出顶级留言表单｜Fluent Forms 全套教程

一、安装与启用（基础第一步）

1. 进入WordPress后台 → 插件 → 安装插件，搜索「Fluent Forms」，点击立即安装 → 启用。
2. 手动安装：下载官方ZIP包 → 插件 → 上传插件 → 选择ZIP → 安装并启用。
3. 启用后左侧菜单出现 Fluent Forms 入口，进入即可开始创建表单。

二、创建第一个表单（拖拽可视化）

1. 新建表单

• 点击 Fluent Forms → Add New Form（添加新表单）。
• 两种选择：

• Blank Form（空白表单）：从零拖拽搭建
• Template（模板）：直接选用联系、注册、报名、问卷等预设模板（推荐新手）。
• 输入表单名称 → 点击 Create Form 进入编辑器。

2. 拖拽添加/编辑字段（核心操作）

• 右侧**Input Fields（输入字段）**面板：包含文本、邮箱、电话、单选/多选、下拉、文件上传、日期、数字、计算、多步等几十种字段。
• 拖拽字段到中间表单区域，点击字段进入编辑面板（左侧）：

• 基础：标签、占位符、是否必填、默认值
• 高级：字段名称（用于邮件/数据调用）、最小/最大长度、正则验证、CSS类、条件逻辑（显示/隐藏）。

• 调整布局：顶部Container（容器），设置1/2/3/4列，实现多栏排版。
• 完成后点击右上角 Save Form 保存。

3. 常用字段示例（联系表单）

• 姓名（Name）、邮箱（Email，必填+验证）、电话（Phone）、留言（Textarea）、提交按钮（Submit）

三、表单核心设置（提交、通知、确认）

1. 提交设置（Settings → Form Settings）

• Form Behavior：提交按钮文字、加载动画、防垃圾（reCAPTCHA v2/v3、hCaptcha，免费版够用）、提交限制（每日/总次数、IP限制）、定时开关（仅指定时段可用）。
• Validation：自定义错误提示、必填提示样式。

2. 提交确认（Settings → Confirmations）

• 提交成功后显示：显示消息（自定义HTML/文本，支持{field}变量）、跳转到URL（感谢页/首页）、显示另一个表单。
• 支持条件确认：根据用户选择显示不同提示/跳转（Pro）。

3. 邮件通知（Settings → Notifications）

• Admin Notification（管理员通知）：

• 收件人：你的邮箱、多个用逗号分隔
• 标题：如「网站新留言：{input_name}」
• 内容：用**{all_fields}**一键插入所有提交数据，或单独调用{input_email}、{input_message}等变量。

• User Notification（用户回执）：自动发感谢/确认邮件给提交者，支持附件（Pro）。
• 条件通知：满足条件才发（如选择“售后”才发给售后邮箱）。

四、表单发布/嵌入（前台显示）

保存表单后，编辑器顶部会显示Shortcode（短代码），格式：[fluentform id="1"]（ID为你的表单ID）。

• 页面/文章：编辑页面 → 添加短代码块 → 粘贴短代码 → 发布
• 古腾堡：直接搜索「Fluent Forms」块，选择表单即可
• 侧边栏/页脚：外观 → 小工具 → 添加「Fluent Forms」小工具，选择表单
• Elementor/Oxygen：直接拖入Fluent Forms组件，选择表单

五、查看与管理提交数据

• 后台：Fluent Forms → Entries（条目），查看所有表单提交、筛选、导出CSV/Excel、标记已读、删除、编辑条目。
• 统计：Entries → Reports，查看提交趋势、字段数据统计（Pro）。

六、进阶功能（免费/Pro）

✅ 免费版够用

• 拖拽编辑器、多栏布局、基础字段、邮件通知、reCAPTCHA、CSV导出、短代码嵌入、条件逻辑（基础）。

✅ Pro版增强（付费）

• 支付集成（Stripe、PayPal、微信/支付宝）、PDF生成、多步表单、会话式表单、用户注册/登录、第三方集成（Mailchimp、Slack、Google Sheets、CRM）、计算字段、文件上传管理、高级条件逻辑。

七、常见问题与优化

1. 收不到邮件：检查WordPress邮件配置，推荐安装WP Mail SMTP插件，用SMTP（QQ/163/企业邮箱）发送，避免进垃圾箱。
2. 表单样式丑：Fluent Forms → Settings → Form Styling，调整颜色、间距、按钮样式；或自定义CSS覆盖。
3. 防垃圾：开启reCAPTCHA v3（无感知），或启用隐藏 honeypot 字段。
4. 速度优化：Global Settings → Assets，仅加载必要CSS/JS，禁用未用字段资源。

八、快速上手流程（5分钟）

1. 安装启用Fluent Forms
2. 新建 → 选「Simple Contact Form」模板
3. 调整字段、设置必填、保存
4. 配置管理员邮箱通知
5. 复制短代码，粘贴到页面发布
6. 前台测试提交，后台查看Entries